@siyahi/ui 0.1.9-next.33 → 0.1.9-next.35

package/dist/components/ui/input-otp.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+import { OTPInput } from "input-otp";
+//#region src/components/ui/input-otp.d.ts
+declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}): React$1.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+  index: number;
+}): React$1.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

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

@@ -0,0 +1,46 @@
+import { cn } from "cn";
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/components/ui/input-otp.tsx
+function InputOTP({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 { char, hasFakeCaret, isActive } = React$1.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ 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 && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/ui/item.d.ts

@@ -0,0 +1,24 @@
+import { Separator } from "./separator.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/item.d.ts
+declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+declare const itemVariants: (props?: ({
+  variant?: "default" | "muted" | "outline" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare const itemMediaVariants: (props?: ({
+  variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React$1.JSX.Element;
+declare function ItemContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+declare function ItemActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/ui/item.js

@@ -0,0 +1,121 @@
+import { Separator } from "./separator.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/item.tsx
+function ItemGroup({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+}
+function ItemHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/ui/kbd.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/ui/kbd.d.ts
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/ui/kbd.js

@@ -0,0 +1,19 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+//#endregion
+export { Kbd, KbdGroup };

package/dist/components/ui/marker.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/marker.d.ts
+declare const markerVariants: (props?: ({
+  variant?: "border" | "default" | "separator" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Marker({ className, variant, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function MarkerIcon({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function MarkerContent({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/marker.js

@@ -0,0 +1,43 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/marker.tsx
+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 /* @__PURE__ */ 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 /* @__PURE__ */ 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
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/menubar.d.ts

@@ -0,0 +1,31 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import * as React$1 from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/components/ui/menubar.d.ts
+declare function Menubar({ className, ...props }: Menubar$1.Props): React$1.JSX.Element;
+declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu>): React$1.JSX.Element;
+declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuGroup>): React$1.JSX.Element;
+declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPortal>): React$1.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuTrigger>): React$1.JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuContent>): React$1.JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuItem>): React$1.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuRadioGroup>): React$1.JSX.Element;
+declare function MenubarRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuSeparator>): React$1.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuShortcut>): React$1.JSX.Element;
+declare function MenubarSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuSub>): React$1.JSX.Element;
+declare function MenubarSubTrigger({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuSubContent>): React$1.JSX.Element;
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/components/ui/menubar.js

@@ -0,0 +1,136 @@
+"use client";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { cn } from "cn";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/components/ui/menubar.tsx
+function Menubar({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(DropdownMenu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuGroup, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		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 /* @__PURE__ */ 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 /* @__PURE__ */ 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,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ 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: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(DropdownMenuSeparator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx(DropdownMenuSub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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
+	});
+}
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/components/ui/message-scroller.d.ts

@@ -0,0 +1,12 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/ui/message-scroller.d.ts
+declare function MessageScrollerProvider(props: React$1.ComponentProps<typeof MessageScroller$1.Provider>): React$1.JSX.Element;
+declare function MessageScroller({ className, ...props }: React$1.ComponentProps<typeof MessageScroller$1.Root>): React$1.JSX.Element;
+declare function MessageScrollerViewport({ className, ...props }: React$1.ComponentProps<typeof MessageScroller$1.Viewport>): React$1.JSX.Element;
+declare function MessageScrollerContent({ className, ...props }: React$1.ComponentProps<typeof MessageScroller$1.Content>): React$1.JSX.Element;
+declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React$1.ComponentProps<typeof MessageScroller$1.Item>): React$1.JSX.Element;
+declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React$1.ComponentProps<typeof MessageScroller$1.Button> & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): React$1.JSX.Element;
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

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

@@ -0,0 +1,60 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { ArrowDownIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region src/components/ui/message-scroller.tsx
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+}
+function MessageScroller({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		"data-slot": "message-scroller-item",
+		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 /* @__PURE__ */ jsx(MessageScroller$1.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		"data-variant": variant,
+		"data-size": size,
+		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 ?? /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+}
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/ui/message.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+//#region src/components/ui/message.d.ts
+declare function MessageGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function Message({ className, align, ...props }: React$1.ComponentProps<"div"> & {
+  align?: "start" | "end";
+}): React$1.JSX.Element;
+declare function MessageAvatar({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function MessageContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function MessageHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function MessageFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/ui/message.js

@@ -0,0 +1,49 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+//#region src/components/ui/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ 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
+	});
+}
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/components/ui/native-select.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/components/ui/native-select.d.ts
+type NativeSelectProps = Omit<React$1.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React$1.JSX.Element;
+declare function NativeSelectOption({ className, ...props }: React$1.ComponentProps<"option">): React$1.JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React$1.ComponentProps<"optgroup">): React$1.JSX.Element;
+//#endregion
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };