@badnpm/ui 0.0.0-stage → 0.0.1

package/dist/esm/components/empty.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+
+function Empty({ className, ...props }) {
+    return (jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "empty-title", className: cn("font-heading text-sm font-medium tracking-tight", className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (jsx("div", { "data-slot": "empty-description", className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className), ...props }));
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/esm/components/field.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+import { Label } from './label.js';
+import { Separator } from './separator.js';
+
+function FieldSet({ className, ...props }) {
+    return (jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
+}
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    return (jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values(),
+        ];
+        if (uniqueErrors?.length == 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return (jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+}
+
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/esm/components/hover-card.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { PreviewCard } from '@base-ui/react/preview-card';
+import { cn } from 'cn';
+
+function HoverCard({ ...props }) {
+    return jsx(PreviewCard.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return (jsx(PreviewCard.Trigger, { "data-slot": "hover-card-trigger", ...props }));
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
+    return (jsx(PreviewCard.Portal, { "data-slot": "hover-card-portal", children: jsx(PreviewCard.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: jsx(PreviewCard.Popup, { "data-slot": "hover-card-content", className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/esm/components/input-group.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Textarea } from './textarea.js';
+
+function InputGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+            "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+            "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+            "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "",
+            "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+        },
+    },
+    defaultVariants: {
+        size: "xs",
+    },
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return (jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/esm/components/input-otp.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from 'cn';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+function InputOTP({ className, containerClassName, ...props }) {
+    return (jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName), spellCheck: false, className: cn("disabled:cursor-not-allowed", className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className), ...props, children: [char, hasFakeCaret && (jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return (jsx("div", { "data-slot": "input-otp-separator", className: "flex items-center [&_svg:not([class*='size-'])]:size-4", role: "separator", ...props, children: jsx(MinusIcon, {}) }));
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/esm/components/input.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { cn } from 'cn';
+
+function Input({ className, type, ...props }) {
+    return (jsx(Input$1, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+
+export { Input };

package/dist/esm/components/item.js

@@ -0,0 +1,80 @@
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+import { Separator } from './separator.js';
+
+function ItemGroup({ className, ...props }) {
+    return (jsx("div", { role: "list", "data-slot": "item-group", className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className), ...props }));
+}
+function ItemSeparator({ className, ...props }) {
+    return (jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn("my-2", className), ...props }));
+}
+const itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+    variants: {
+        variant: {
+            default: "border-transparent",
+            outline: "border-border",
+            muted: "border-transparent bg-muted/50",
+        },
+        size: {
+            default: "gap-2.5 px-3 py-2.5",
+            sm: "gap-2.5 px-3 py-2.5",
+            xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Item({ className, variant = "default", size = "default", render, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps({
+            className: cn(itemVariants({ variant, size, className })),
+        }, props),
+        render,
+        state: {
+            slot: "item",
+            variant,
+            size,
+        },
+    });
+}
+const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "[&_svg:not([class*='size-'])]:size-4",
+            image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+    return (jsx("div", { "data-slot": "item-media", "data-variant": variant, className: cn(itemMediaVariants({ variant, className })), ...props }));
+}
+function ItemContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-content", className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className), ...props }));
+}
+function ItemTitle({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-title", className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className), ...props }));
+}
+function ItemDescription({ className, ...props }) {
+    return (jsx("p", { "data-slot": "item-description", className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function ItemActions({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-actions", className: cn("flex items-center gap-2", className), ...props }));
+}
+function ItemHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-header", className: cn("flex basis-full items-center justify-between gap-2", className), ...props }));
+}
+function ItemFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "item-footer", className: cn("flex basis-full items-center justify-between gap-2", className), ...props }));
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/esm/components/kbd.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from 'cn';
+
+function Kbd({ className, ...props }) {
+    return (jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className), ...props }));
+}
+function KbdGroup({ className, ...props }) {
+    return (jsx("kbd", { "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1", className), ...props }));
+}
+
+export { Kbd, KbdGroup };

package/dist/esm/components/label.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from 'cn';
+
+function Label({ className, ...props }) {
+    return (jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+}
+
+export { Label };

package/dist/esm/components/marker.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+
+const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground", {
+    variants: {
+        variant: {
+            default: "",
+            separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+            border: "border-b border-border pb-2",
+        },
+    },
+});
+function Marker({ className, variant = "default", render, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps({
+            className: cn(markerVariants({ variant, className })),
+        }, props),
+        render,
+        state: {
+            slot: "marker",
+            variant,
+        },
+    });
+}
+function MarkerIcon({ className, ...props }) {
+    return (jsx("span", { "data-slot": "marker-icon", "aria-hidden": "true", className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function MarkerContent({ className, ...props }) {
+    return (jsx("span", { "data-slot": "marker-content", className: cn("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/esm/components/menubar.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+import { Menubar as Menubar$1 } from '@base-ui/react/menubar';
+import { cn } from 'cn';
+import { DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenu, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu.js';
+import { CheckIcon } from 'lucide-react';
+
+function Menubar({ className, ...props }) {
+    return (jsx(Menubar$1, { "data-slot": "menubar", className: cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className), ...props }));
+}
+function MenubarMenu({ ...props }) {
+    return jsx(DropdownMenu, { "data-slot": "menubar-menu", ...props });
+}
+function MenubarGroup({ ...props }) {
+    return jsx(DropdownMenuGroup, { "data-slot": "menubar-group", ...props });
+}
+function MenubarPortal({ ...props }) {
+    return jsx(DropdownMenuPortal, { "data-slot": "menubar-portal", ...props });
+}
+function MenubarTrigger({ className, ...props }) {
+    return (jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn("flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className), ...props }));
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+    return (jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props }));
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+    return (jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (jsxs(Menu.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: jsx(Menu.CheckboxItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function MenubarRadioGroup({ ...props }) {
+    return jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+    return (jsxs(Menu.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: jsx(Menu.RadioItemIndicator, { children: jsx(CheckIcon, {}) }) }), children] }));
+}
+function MenubarLabel({ className, inset, ...props }) {
+    return (jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className), ...props }));
+}
+function MenubarSeparator({ className, ...props }) {
+    return (jsx(DropdownMenuSeparator, { "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function MenubarShortcut({ className, ...props }) {
+    return (jsx(DropdownMenuShortcut, { "data-slot": "menubar-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className), ...props }));
+}
+function MenubarSub({ ...props }) {
+    return jsx(DropdownMenuSub, { "data-slot": "menubar-sub", ...props });
+}
+function MenubarSubTrigger({ className, inset, ...props }) {
+    return (jsx(DropdownMenuSubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function MenubarSubContent({ className, ...props }) {
+    return (jsx(DropdownMenuSubContent, { "data-slot": "menubar-sub-content", className: cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }));
+}
+
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/esm/components/message-scroller.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { ArrowDownIcon } from 'lucide-react';
+
+function MessageScrollerProvider(props) {
+    return jsx(MessageScroller$1.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+    return (jsx(MessageScroller$1.Root, { "data-slot": "message-scroller", className: cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className), ...props }));
+}
+function MessageScrollerViewport({ className, ...props }) {
+    return (jsx(MessageScroller$1.Viewport, { "data-slot": "message-scroller-viewport", className: cn("size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible", className), ...props }));
+}
+function MessageScrollerContent({ className, ...props }) {
+    return (jsx(MessageScroller$1.Content, { "data-slot": "message-scroller-content", className: cn("flex h-max min-h-full flex-col gap-6", className), ...props }));
+}
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+    return (jsx(MessageScroller$1.Item, { "data-slot": "message-scroller-item", scrollAnchor: scrollAnchor, className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className), ...props }));
+}
+function MessageScrollerButton({ direction = "end", className, children, render, variant = "secondary", size = "icon-sm", ...props }) {
+    return (jsx(MessageScroller$1.Button, { "data-slot": "message-scroller-button", "data-direction": direction, "data-variant": variant, "data-size": size, direction: direction, className: cn("absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180", className), render: render ?? jsx(Button, { variant: variant, size: size }), ...props, children: children ?? (jsxs(Fragment, { children: [jsx(ArrowDownIcon, {}), jsx("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })] })) }));
+}
+
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };

package/dist/esm/components/message.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from 'cn';
+
+function MessageGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "message-group", className: cn("flex min-w-0 flex-col gap-2", className), ...props }));
+}
+function Message({ className, align = "start", ...props }) {
+    return (jsx("div", { "data-slot": "message", "data-align": align, className: cn("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className), ...props }));
+}
+function MessageAvatar({ className, ...props }) {
+    return (jsx("div", { "data-slot": "message-avatar", className: cn("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8", className), ...props }));
+}
+function MessageContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "message-content", className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className), ...props }));
+}
+function MessageHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "message-header", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0", className), ...props }));
+}
+function MessageFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "message-footer", className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className), ...props }));
+}
+
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/esm/components/native-select.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from 'cn';
+import { ChevronDownIcon } from 'lucide-react';
+
+function NativeSelect({ className, size = "default", ...props }) {
+    return (jsxs("div", { className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), "data-slot": "native-select-wrapper", "data-size": size, children: [jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+}
+function NativeSelectOption({ className, ...props }) {
+    return (jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+}
+function NativeSelectOptGroup({ className, ...props }) {
+    return (jsx("optgroup", { "data-slot": "native-select-optgroup", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/esm/components/navigation-menu.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+import { ChevronDownIcon } from 'lucide-react';
+
+function NavigationMenu({ align = "start", className, children, ...props }) {
+    return (jsxs(NavigationMenu$1.Root, { "data-slot": "navigation-menu", className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, jsx(NavigationMenuPositioner, { align: align })] }));
+}
+function NavigationMenuList({ className, ...props }) {
+    return (jsx(NavigationMenu$1.List, { "data-slot": "navigation-menu-list", className: cn("group flex flex-1 list-none items-center justify-center gap-0", className), ...props }));
+}
+function NavigationMenuItem({ className, ...props }) {
+    return (jsx(NavigationMenu$1.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props }));
+}
+const navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (jsxs(NavigationMenu$1.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [children, " ", jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
+}
+function NavigationMenuContent({ className, ...props }) {
+    return (jsx(NavigationMenu$1.Content, { "data-slot": "navigation-menu-content", className: cn("data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className), ...props }));
+}
+function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }) {
+    return (jsx(NavigationMenu$1.Portal, { children: jsx(NavigationMenu$1.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn("isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className), ...props, children: jsx(NavigationMenu$1.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0", children: jsx(NavigationMenu$1.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
+}
+function NavigationMenuLink({ className, ...props }) {
+    return (jsx(NavigationMenu$1.Link, { "data-slot": "navigation-menu-link", className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function NavigationMenuIndicator({ className, ...props }) {
+    return (jsx(NavigationMenu$1.Icon, { "data-slot": "navigation-menu-indicator", className: cn("top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in", className), ...props, children: jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) }));
+}
+
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle };

package/dist/esm/components/pagination.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { MoreHorizontalIcon, ChevronRightIcon, ChevronLeftIcon } from 'lucide-react';
+
+function Pagination({ className, ...props }) {
+    return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (jsx("ul", { "data-slot": "pagination-content", className: cn("flex items-center gap-0.5", className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+    return (jsx(Button, { variant: isActive ? "outline" : "ghost", size: size, className: cn(className), nativeButton: false, render: jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
+}
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+    return (jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("pl-1.5!", className), ...props, children: [jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), jsx("span", { className: "hidden sm:block", children: text })] }));
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+    return (jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("pr-1.5!", className), ...props, children: [jsx("span", { className: "hidden sm:block", children: text }), jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [jsx(MoreHorizontalIcon, {}), jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/esm/components/popover.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { cn } from 'cn';
+
+function Popover({ ...props }) {
+    return jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+    return (jsx(Popover$1.Portal, { children: jsx(Popover$1.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: jsx(Popover$1.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function PopoverHeader({ className, ...props }) {
+    return (jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (jsx(Popover$1.Title, { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (jsx(Popover$1.Description, { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
+}
+
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };