@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/ui/field.js

@@ -0,0 +1,109 @@
+import { Separator } from "./separator.js";
+import { Label } from "./label.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/field.tsx
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm", className),
+		...props
+	});
+}
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group @container/field-group flex w-full flex-col gap-4 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 /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ 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:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-input/40 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-2 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/30 *:data-[slot=field]:p-2 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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn("flex w-fit items-center gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50", className),
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-left text-xs/relaxed 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 /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn("relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			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 /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-xs/relaxed font-normal text-destructive", className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

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 { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+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-72 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-xs/relaxed 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-group.d.ts

@@ -0,0 +1,20 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/input-group.d.ts
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+  size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+  type?: "button" | "submit" | "reset";
+}): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

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

@@ -0,0 +1,77 @@
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex h-(--soft-field-height) w-full min-w-0 items-center rounded-md border border-input bg-input/20 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-md 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-[[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-1 py-2 text-xs/relaxed font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5", {
+	variants: { align: {
+		"inline-start": "order-first pl-(--soft-field-padding-x) has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem]",
+		"inline-end": "order-last pr-(--soft-field-padding-x) has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem]",
+		"block-start": "order-first w-full justify-start px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2 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 /* @__PURE__ */ 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 rounded-md text-xs/relaxed shadow-none", {
+	variants: { size: {
+		xs: "h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3",
+		sm: "gap-1",
+		"icon-xs": "size-6 p-0 has-[>svg]:p-0",
+		"icon-sm": "size-7 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-xs/relaxed text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ 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 aria-invalid:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ 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 aria-invalid:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

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

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

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { MinusIcon } from "lucide-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-md has-aria-invalid:border-destructive has-aria-invalid:ring-2 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.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("relative flex size-7 items-center justify-center border-y border-r border-input bg-input/20 text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/30 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/input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+//#region src/components/ui/input.d.ts
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+//#endregion
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Input } from "@base-ui/react/input";
+//#region src/components/ui/input.tsx
+function Input$1({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("h-(--soft-field-height) w-full min-w-0 rounded-md border border-input bg-input/20 px-(--soft-field-padding-x) py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+//#endregion
+export { Input$1 as Input };

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

@@ -0,0 +1,24 @@
+import { Separator } from "./separator.js";
+import * as React 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.ComponentProps<"div">): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.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.ReactElement<unknown, string | React.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.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/ui/item.js

@@ -0,0 +1,120 @@
+import { Separator } from "./separator.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+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-md border text-xs/relaxed 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.5 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-8 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.5 [&+[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-xs/relaxed 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-xs/relaxed font-normal text-muted-foreground [&>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 { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+//#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-xs bg-muted px-1 font-sans text-[0.625rem] 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/label.d.ts

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

package/dist/components/ui/label.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+//#region src/components/ui/label.tsx
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-xs/relaxed 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
+	});
+}
+//#endregion
+export { Label };

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

@@ -0,0 +1,12 @@
+import * as React 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.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function MarkerIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function MarkerContent({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/marker.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+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-xs/relaxed text-muted-foreground [&_svg:not([class*='size-'])]:size-3.5 [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-3.5 shrink-0 [&_svg:not([class*='size-'])]:size-3.5", 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 from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar } from "@base-ui/react/menubar";
+//#region src/components/ui/menubar.d.ts
+declare function Menubar$1({ className, ...props }: Menubar.Props): React.JSX.Element;
+declare function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>): React.JSX.Element;
+declare function MenubarGroup({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>): React.JSX.Element;
+declare function MenubarPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>): React.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>): React.JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuItem>): React.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuRadioGroup>): React.JSX.Element;
+declare function MenubarRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuSeparator>): React.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React.ComponentProps<typeof DropdownMenuShortcut>): React.JSX.Element;
+declare function MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>): React.JSX.Element;
+declare function MenubarSubTrigger({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>): React.JSX.Element;
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };