@siyahi/ui 0.1.9-next.34 → 0.1.9-next.36

package/dist/components/ui/drawer.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+//#region src/components/ui/drawer.tsx
+const DrawerContext = React$1.createContext(null);
+function useDrawer() {
+	const context = React$1.useContext(DrawerContext);
+	if (!context) throw new Error("useDrawer must be used within a Drawer.");
+	return context;
+}
+function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const contextValue = React$1.useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
+			"data-slot": "drawer",
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props
+		})
+	});
+}
+function DrawerTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className),
+		...props
+	});
+}
+function DrawerSwipeHandle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className),
+		...props
+	});
+}
+function DrawerContent({ className, children, ...props }) {
+	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		children: [modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : void 0 }), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
+			"data-slot": "drawer-viewport",
+			"data-modal": modal,
+			className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
+			children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
+				"data-slot": "drawer-popup",
+				"data-swipe-axis": swipeAxis,
+				"data-snap-points": hasSnapPoints ? "" : void 0,
+				className: cn("group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className),
+				...props,
+				children: [showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}), /* @__PURE__ */ jsx(Drawer$1.Content, {
+					"data-slot": "drawer-content",
+					className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"),
+					children
+				})]
+			})
+		})]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-slot": "drawer-title",
+		className: cn("font-heading text-base font-medium text-foreground", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-sm text-balance text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,13 @@
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/empty.d.ts
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/empty.js

@@ -0,0 +1,59 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("font-heading text-sm font-medium tracking-tight", className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/field.js

@@ -1,5 +1,5 @@
-import { Label } from "./label.js";
 import { Separator } from "./separator.js";
+import { Label } from "./label.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,7 @@
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.d.ts
+declare function HoverCard({ ...props }: PreviewCard.Root.Props): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: PreviewCard.Trigger.Props): import("react").JSX.Element;
+declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCard.Popup.Props & Pick<PreviewCard.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.tsx
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ 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
+			})
+		})
+	});
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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 };