@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/base/alert.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/web/base/alert.tsx
+const alertVariants = cva("relative w-full rounded-surface border px-3.5 py-3 text-[13px] grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "border-state-error/30 bg-state-error/5 text-state-error [&>svg]:text-current *:data-[slot=alert-description]:text-state-error"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: cn(alertVariants({ variant }), className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("col-start-2 min-h-4 font-medium tracking-tight", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+		...props
+	});
+}
+
+//#endregion
+export { Alert, AlertDescription, AlertTitle };

package/dist/web/base/avatar.d.ts

@@ -0,0 +1,8 @@
+import * as React$1 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+//#region src/web/base/avatar.d.ts
+declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): React$1.JSX.Element;
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/web/base/avatar.js

@@ -0,0 +1,29 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+//#region src/web/base/avatar.tsx
+function Avatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+		"data-slot": "avatar",
+		className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+		...props
+	});
+}
+
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/web/base/badge.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/badge.d.ts
+declare const badgeVariants: (props?: ({
+  variant?: "<3" | "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>["variant"];
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { Badge, badgeVariants };

package/dist/web/base/badge.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/web/base/badge.tsx
+const badgeVariants = cva("inline-flex items-center justify-center rounded-control border h-5 px-1.5 text-xs font-medium font-mono tabular-nums tracking-[0.01em] w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background overflow-hidden", {
+	variants: { variant: {
+		default: "border-transparent bg-action text-action-foreground [a&]:hover:bg-action-hover",
+		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
+		destructive: "border-state-error/30 bg-state-error/5 text-state-error",
+		outline: "border-input text-foreground [a&]:hover:bg-accent",
+		"<3": "border-transparent bg-lt-three text-lt-three-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		"data-slot": "badge",
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { Badge, badgeVariants };

package/dist/web/base/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from "react";
+//#region src/web/base/breadcrumb.d.ts
+declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): React$1.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React$1.ComponentProps<"a"> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbEllipsis({ className, moreLabel, ...props }: React$1.ComponentProps<"span"> & {
+  /** 省略された階層の読み上げ名 */
+  moreLabel?: string;
+}): React$1.JSX.Element;
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/web/base/breadcrumb.js

@@ -0,0 +1,72 @@
+import { BREADCRUMB_LABEL, MORE_LEVELS_LABEL } from "../lib/labels.js";
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/web/base/breadcrumb.tsx
+function Breadcrumb({ ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": BREADCRUMB_LABEL,
+		"data-slot": "breadcrumb",
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 text-[13px] break-words text-muted-foreground sm:gap-2.5", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex items-center gap-1.5", className),
+		...props
+	});
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		"data-slot": "breadcrumb-link",
+		className: cn("hover:text-foreground", className),
+		...props
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("font-normal text-foreground", className),
+		...props
+	});
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+}
+function BreadcrumbEllipsis({ className, moreLabel = MORE_LEVELS_LABEL, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("flex size-9 items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: moreLabel
+		})]
+	});
+}
+
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/web/base/button.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "<3" | "default" | "destructive" | "ghost" | "link" | "outline" | "plate" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { Button, buttonVariants };

package/dist/web/base/button.js

@@ -0,0 +1,47 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/web/base/button.tsx
+const buttonVariants = cva("cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control text-[13px] font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		variant: {
+			default: "bg-action text-action-foreground hover:bg-action-hover",
+			destructive: "bg-destructive-solid text-destructive-solid-foreground hover:bg-destructive-solid/90",
+			outline: "border border-input bg-card text-foreground shadow-xs hover:bg-accent",
+			secondary: "border border-input bg-card text-secondary-foreground shadow-xs hover:bg-accent",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-action-ink underline-offset-4 hover:underline",
+			plate: "border border-black bg-white font-normal text-black hover:border-white hover:bg-black hover:text-white",
+			"<3": "bg-lt-three text-lt-three-foreground hover:bg-lt-three/85"
+		},
+		size: {
+			default: "h-8 px-3 py-1.5 has-[>svg]:px-2.5",
+			xs: "h-6 rounded-control gap-1 px-2 text-xs has-[>svg]:px-1.5",
+			sm: "h-7 rounded-control gap-1.5 px-2.5 has-[>svg]:px-2",
+			lg: "h-10 rounded-control px-5 text-sm has-[>svg]:px-4",
+			xl: "h-12 rounded-control px-6 text-sm has-[>svg]:px-4",
+			icon: "size-8",
+			"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+
+//#endregion
+export { Button, buttonVariants };

package/dist/web/base/card.d.ts

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+//#region src/web/base/card.d.ts
+declare function Card({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+/** 見出しのレベル（`<h2>`〜`<h6>`）。h1 はページに 1 つなので、カードの題には選ばせない。 */
+export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * カードの題。既定は `<div>`（見出しの階層に入れない）。`headingLevel` を渡すと `<h2>`〜`<h6>` になり、見出しの階層に入る
+ * （見た目は同じ。見出しの既定の余白・大きさは打ち消す）。
+ */
+declare function CardTitle({ className, headingLevel, ...props }: React$1.ComponentProps<"div"> & {
+  headingLevel?: CardHeadingLevel;
+}): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/web/base/card.js

@@ -0,0 +1,74 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/base/card.tsx
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		className: cn("bg-card text-card-foreground flex flex-col gap-5 rounded-surface border py-5", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-4 sm:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-5", className),
+		...props
+	});
+}
+const HEADINGS = {
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+};
+/**
+* カードの題。既定は `<div>`（見出しの階層に入れない）。`headingLevel` を渡すと `<h2>`〜`<h6>` になり、見出しの階層に入る
+* （見た目は同じ。見出しの既定の余白・大きさは打ち消す）。
+*/
+function CardTitle({ className, headingLevel, ...props }) {
+	const classes = cn("text-base font-semibold leading-tight tracking-tight", className);
+	if (headingLevel === void 0) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: classes,
+		...props
+	});
+	const Heading = HEADINGS[headingLevel];
+	return /* @__PURE__ */ jsx(Heading, {
+		"data-slot": "card-title",
+		className: cn("m-0", classes),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+function CardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: cn("px-4 sm:px-5", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center px-4 sm:px-5 [.border-t]:pt-5", className),
+		...props
+	});
+}
+
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/web/base/checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/web/base/checkbox.d.ts
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof CheckboxPrimitive.Root>): React$1.JSX.Element;
+//#endregion
+export { Checkbox };

package/dist/web/base/checkbox.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+
+//#region src/web/base/checkbox.tsx
+function Checkbox({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer border-line-control bg-card data-[state=checked]:bg-action data-[state=checked]:text-action-foreground data-[state=checked]:border-action aria-invalid:border-destructive size-4 shrink-0 rounded-control border outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "flex items-center justify-center text-current",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+		})
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/web/base/dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/web/base/dialog.d.ts
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): React$1.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, closeLabel, onClose, onOpenAutoFocus, onCloseAutoFocus, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+  /** 閉じるボタンの読み上げ名 */
+  closeLabel?: string;
+  onClose?: () => void;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): React$1.JSX.Element;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/web/base/dialog.js

@@ -0,0 +1,92 @@
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { cn } from "../lib/utils.js";
+import { useRestoreFocus } from "../lib/restore-focus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+//#region src/web/base/dialog.tsx
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-scrim", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, closeLabel = CLOSE_LABEL, onClose, onOpenAutoFocus, onCloseAutoFocus, ...props }) {
+	const focus = useRestoreFocus(onOpenAutoFocus, onCloseAutoFocus);
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			"data-slot": "dialog-content",
+			className: cn("bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-surface p-5 duration-200 sm:max-w-lg", className),
+			onOpenAutoFocus: focus.onOpenAutoFocus,
+			onCloseAutoFocus: focus.onCloseAutoFocus,
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				"data-slot": "dialog-close",
+				className: "text-muted-foreground hover:bg-accent hover:text-foreground  absolute top-3.5 right-3.5 flex size-7 cursor-pointer items-center justify-center rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				onClick: onClose,
+				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: closeLabel
+				})]
+			})]
+		})]
+	});
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-base leading-6 font-semibold", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground text-[13px] leading-5", className),
+		...props
+	});
+}
+
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/web/base/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React$1 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+//#region src/web/base/dropdown-menu.d.ts
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, portal, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+  portal?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React$1.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };