@hanzo/ui
Version:
Multi-framework UI library with React, Vue, Svelte, and React Native support. Based on shadcn/ui with comprehensive framework coverage.
1,508 lines (1,482 loc) • 439 kB
JavaScript
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
// primitives/accordion.tsx
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
// src/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
__name(cn, "cn");
// primitives/accordion.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Accordion = AccordionPrimitive.Root;
var AccordionItem = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { className: cn("", className), ref, ...props }), "AccordionItem");
AccordionItem.displayName = "AccordionItem";
var AccordionTrigger = /* @__PURE__ */ __name(({
className,
children,
hideArrow = false,
ref,
...props
}) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
AccordionPrimitive.Trigger,
{
className: cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
),
ref,
...props,
children: [
children,
hideArrow ? null : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
]
}
) }), "AccordionTrigger");
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
var AccordionContent = /* @__PURE__ */ __name(({
className,
children,
ref,
...props
}) => /* @__PURE__ */ jsx(
AccordionPrimitive.Content,
{
className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down w-full overflow-hidden text-sm transition-all",
ref,
...props,
children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
}
), "AccordionContent");
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
// primitives/alert-dialog.tsx
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
// primitives/button.tsx
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import { Loader2 } from "lucide-react";
import * as React from "react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
// Keep the additional Hanzo variants for backward compatibility
primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
linkFG: "text-primary underline-offset-4 hover:underline",
linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
var Button = React.forwardRef(
({ className, variant, size: size2, asChild = false, isLoading = false, children, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return /* @__PURE__ */ jsxs2(
Comp,
{
className: cn(buttonVariants({ variant, size: size2, className })),
ref,
...props,
children: [
isLoading ? /* @__PURE__ */ jsx2(
Loader2,
{
className: cn("h-4 w-4 animate-spin", size2 !== "icon" && "mr-2")
}
) : null,
isLoading && size2 === "icon" ? null : children
]
}
);
}
);
Button.displayName = "Button";
var button_default = Button;
// primitives/alert-dialog.tsx
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
var AlertDialog = AlertDialogPrimitive.Root;
var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
var AlertDialogPortal = AlertDialogPrimitive.Portal;
var AlertDialogOverlay = /* @__PURE__ */ __name(({
className,
children,
ref,
...props
}) => /* @__PURE__ */ jsx3(
AlertDialogPrimitive.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 backdrop-blur-sm",
"bg-bg-dark/90",
className
),
...props,
ref
}
), "AlertDialogOverlay");
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
var AlertDialogContent = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsxs3(AlertDialogPortal, { children: [
/* @__PURE__ */ jsx3(AlertDialogOverlay, {}),
/* @__PURE__ */ jsx3(
AlertDialogPrimitive.Content,
{
className: cn(
"bg-bg-default 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 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
),
ref,
...props
}
)
] }), "AlertDialogContent");
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
var AlertDialogHeader = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx3(
"div",
{
className: cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
),
...props
}
), "AlertDialogHeader");
AlertDialogHeader.displayName = "AlertDialogHeader";
var AlertDialogFooter = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx3("div", { className: cn("flex", className), ...props }), "AlertDialogFooter");
AlertDialogFooter.displayName = "AlertDialogFooter";
var AlertDialogTitle = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx3(
AlertDialogPrimitive.Title,
{
className: cn("text-lg font-semibold", className),
ref,
...props
}
), "AlertDialogTitle");
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
var AlertDialogDescription = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx3(
AlertDialogPrimitive.Description,
{
className: cn("text-text-secondary text-sm", className),
ref,
...props
}
), "AlertDialogDescription");
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
var AlertDialogAction = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx3(
AlertDialogPrimitive.Action,
{
className: cn(
buttonVariants({ variant: "default", size: "sm" }),
className
),
ref,
...props
}
), "AlertDialogAction");
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
var AlertDialogCancel = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx3(
AlertDialogPrimitive.Cancel,
{
className: cn(
buttonVariants({ variant: "outline", size: "sm" }),
className
),
ref,
...props
}
), "AlertDialogCancel");
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
// primitives/alert.tsx
import { cva as cva2 } from "class-variance-authority";
import { jsx as jsx4 } from "react/jsx-runtime";
var alertVariants = cva2(
"[&>svg]:text-text-default relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-bg-tertiary text-text-default",
info: "text-text-secondary [&>svg]:text-text-secondary bg-gray-250 border-gray-100 border-gray-200",
destructive: "border-[#4d0408] bg-[#2d0607] text-[#ff9ea1] [&>svg]:text-[#ff9ea1]",
warning: "border-yellow-800 bg-yellow-900 text-yellow-400 [&>svg]:text-yellow-400",
success: "border-green-800 bg-green-900 text-green-400 [&>svg]:text-green-400",
download: "border-gray-800 bg-gray-900 text-cyan-400 [&>svg]:text-cyan-400"
}
},
defaultVariants: {
variant: "default"
}
}
);
var Alert = /* @__PURE__ */ __name(({ className, variant, ref, ...props }) => /* @__PURE__ */ jsx4(
"div",
{
className: cn(alertVariants({ variant }), className),
ref,
role: "alert",
...props
}
), "Alert");
Alert.displayName = "Alert";
var AlertTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx4(
"h5",
{
className: cn("mb-1 leading-none font-medium tracking-tight", className),
ref,
...props
}
), "AlertTitle");
AlertTitle.displayName = "AlertTitle";
var AlertDescription = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx4(
"div",
{
className: cn("text-sm [&_p]:leading-relaxed", className),
ref,
...props
}
), "AlertDescription");
AlertDescription.displayName = "AlertDescription";
// primitives/avatar.tsx
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { jsx as jsx5 } from "react/jsx-runtime";
var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx5(
AvatarPrimitive.Root,
{
className: cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
),
ref,
...props
}
), "Avatar");
Avatar.displayName = AvatarPrimitive.Root.displayName;
var AvatarImage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx5(
AvatarPrimitive.Image,
{
className: cn("aspect-square h-full w-full", className),
ref,
...props
}
), "AvatarImage");
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
var AvatarFallback = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx5(
AvatarPrimitive.Fallback,
{
className: cn(
"bg-muted flex h-full w-full items-center justify-center rounded-full",
className
),
ref,
...props
}
), "AvatarFallback");
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
// primitives/breadcrumb.tsx
import { Slot as Slot2 } from "@radix-ui/react-slot";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var Breadcrumb = /* @__PURE__ */ __name(({ ref, ...props }) => /* @__PURE__ */ jsx6("nav", { "aria-label": "breadcrumb", ref, ...props }), "Breadcrumb");
Breadcrumb.displayName = "Breadcrumb";
var BreadcrumbList = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx6(
"ol",
{
className: cn(
"text-text-secondary flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
className
),
ref,
...props
}
), "BreadcrumbList");
BreadcrumbList.displayName = "BreadcrumbList";
var BreadcrumbItem = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx6(
"li",
{
className: cn("inline-flex items-center gap-1.5", className),
ref,
...props
}
), "BreadcrumbItem");
BreadcrumbItem.displayName = "BreadcrumbItem";
var BreadcrumbLink = /* @__PURE__ */ __name(({
asChild,
className,
ref,
...props
}) => {
const Comp = asChild ? Slot2 : "a";
return /* @__PURE__ */ jsx6(
Comp,
{
className: cn("hover:text-text-default transition-colors", className),
ref,
...props
}
);
}, "BreadcrumbLink");
BreadcrumbLink.displayName = "BreadcrumbLink";
var BreadcrumbPage = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx6(
"span",
{
"aria-current": "page",
"aria-disabled": "true",
className: cn("text-text-default font-normal", className),
ref,
role: "link",
...props
}
), "BreadcrumbPage");
BreadcrumbPage.displayName = "BreadcrumbPage";
var BreadcrumbSeparator = /* @__PURE__ */ __name(({
children,
className,
...props
}) => /* @__PURE__ */ jsx6(
"li",
{
"aria-hidden": "true",
className: cn("[&>svg]:h-4 [&>svg]:w-4", className),
role: "presentation",
...props,
children: children ?? /* @__PURE__ */ jsx6(ChevronRight, {})
}
), "BreadcrumbSeparator");
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
var BreadcrumbEllipsis = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsxs4(
"span",
{
"aria-hidden": "true",
className: cn("flex h-9 w-9 items-center justify-center", className),
role: "presentation",
...props,
children: [
/* @__PURE__ */ jsx6(MoreHorizontal, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "More" })
]
}
), "BreadcrumbEllipsis");
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
// primitives/card.tsx
import { jsx as jsx7 } from "react/jsx-runtime";
var Card = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
"div",
{
className: cn(
"bg-card text-card-foreground rounded-lg border shadow-xs",
className
),
ref,
...props
}
), "Card");
Card.displayName = "Card";
var CardHeader = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
"div",
{
className: cn("flex flex-col space-y-1.5 p-6", className),
ref,
...props
}
), "CardHeader");
CardHeader.displayName = "CardHeader";
var CardTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
"h3",
{
className: cn(
"text-2xl leading-none font-semibold tracking-tight",
className
),
ref,
...props
}
), "CardTitle");
CardTitle.displayName = "CardTitle";
var CardDescription = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsx7(
"p",
{
className: cn("text-text-secondary text-sm", className),
ref,
...props
}
), "CardDescription");
CardDescription.displayName = "CardDescription";
var CardContent = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx7("div", { className: cn("p-6 pt-0", className), ref, ...props }), "CardContent");
CardContent.displayName = "CardContent";
var CardFooter = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsx7(
"div",
{
className: cn("flex items-center p-6 pt-0", className),
ref,
...props
}
), "CardFooter");
CardFooter.displayName = "CardFooter";
// primitives/carousel.tsx
import * as React2 from "react";
import useEmblaCarousel from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
// util/copy-to-clipboard.ts
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement("textarea");
textarea.style.position = "fixed";
textarea.style.top = "-9999px";
textarea.style.left = "-9999px";
textarea.innerText = text;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
document.execCommand("copy");
textarea.remove();
}
}
__name(copyToClipboard, "copyToClipboard");
// util/spread-to-transform.ts
function spreadToTransform(t) {
let transformStrings = [];
const scaleVal = "scale" in t ? t.scale : void 0;
if (scaleVal) {
if (typeof scaleVal === "number") {
transformStrings.push(`scale(${scaleVal})`);
} else if (Array.isArray(scaleVal) && scaleVal.length == 2 && typeof scaleVal[0] === "number") {
transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
} else {
throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
}
}
return transformStrings.length > 0 ? { transform: transformStrings.join(" ") } : {};
}
__name(spreadToTransform, "spreadToTransform");
var spread_to_transform_default = spreadToTransform;
// util/index.ts
function constrain(value, minOrConstrainTo, max) {
if (typeof value === "number" && typeof minOrConstrainTo === "number" && typeof max === "number") {
return Math.min(Math.max(value, minOrConstrainTo), max);
}
if (typeof value === "object" && typeof minOrConstrainTo === "object") {
const dim = value;
const constrainTo = minOrConstrainTo;
const aspectRatio = dim.w / dim.h;
const constrainAspectRatio = constrainTo.w / constrainTo.h;
if (aspectRatio > constrainAspectRatio) {
return {
w: constrainTo.w,
h: constrainTo.w / aspectRatio
};
} else {
return {
w: constrainTo.h * aspectRatio,
h: constrainTo.h
};
}
}
throw new Error("Invalid parameters for constrain function");
}
__name(constrain, "constrain");
// primitives/carousel.tsx
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
var CarouselContext = React2.createContext(null);
var useCarousel = /* @__PURE__ */ __name(() => {
const service = React2.useContext(CarouselContext);
if (!service) {
throw new Error("useCarousel must be used within a <Carousel />");
}
return service;
}, "useCarousel");
var Carousel = React2.forwardRef(
({
orientation = "horizontal",
options,
setApi,
plugins,
className,
children,
onCarouselSelect,
...props
}, ref) => {
const [carouselRef, api] = useEmblaCarousel({ ...options, axis: orientation === "horizontal" ? "x" : "y" }, plugins);
const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
const [canScrollNext, setCanScrollNext] = React2.useState(false);
const onSelect = React2.useCallback((api2) => {
if (!api2) {
return;
}
setCanScrollPrev(api2.canScrollPrev());
setCanScrollNext(api2.canScrollNext());
if (onCarouselSelect) {
onCarouselSelect(api2);
}
}, []);
const scrollPrev = React2.useCallback(() => {
api?.scrollPrev();
}, [api]);
const scrollNext = React2.useCallback(() => {
api?.scrollNext();
}, [api]);
const handleKeyDown = React2.useCallback((event) => {
if (event.key === "ArrowLeft") {
event.preventDefault();
scrollPrev();
} else if (event.key === "ArrowRight") {
event.preventDefault();
scrollNext();
}
}, [scrollPrev, scrollNext]);
React2.useEffect(() => {
if (!api || !setApi) {
return;
}
setApi(api);
}, [api, setApi]);
React2.useEffect(() => {
if (!api) {
return;
}
onSelect(api);
api.on("reInit", onSelect);
api.on("select", onSelect);
return () => {
api?.off("select", onSelect);
};
}, [api, onSelect]);
return /* @__PURE__ */ jsx8(
CarouselContext.Provider,
{
value: {
carouselRef,
api,
options,
orientation: orientation || (options?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext
},
children: /* @__PURE__ */ jsx8(
"div",
{
ref,
onKeyDownCapture: handleKeyDown,
className: cn("relative", className),
role: "region",
"aria-roledescription": "carousel",
"data-vaul-no-drag": true,
...props,
children
}
)
}
);
}
);
Carousel.displayName = "Carousel";
var CarouselContent = React2.forwardRef(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel();
return /* @__PURE__ */ jsx8("div", { ref: carouselRef, className: "overflow-hidden", "data-vaul-no-drag": true, children: /* @__PURE__ */ jsx8(
"div",
{
ref,
className: cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
),
...props
}
) });
});
CarouselContent.displayName = "CarouselContent";
var CarouselItem = React2.forwardRef(({ className, ...props }, ref) => {
const { orientation } = useCarousel();
return /* @__PURE__ */ jsx8(
"div",
{
ref,
role: "group",
"aria-roledescription": "slide",
"data-vaul-no-drag": true,
className: cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
),
...props
}
);
});
CarouselItem.displayName = "CarouselItem";
var CarouselPrevious = React2.forwardRef(({ className, variant = "ghost", size: size2 = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return /* @__PURE__ */ jsxs5(
button_default,
{
ref,
variant,
size: size2,
className: cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className
),
disabled: !canScrollPrev,
onClick: scrollPrev,
...props,
children: [
/* @__PURE__ */ jsx8(ArrowLeft, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Previous slide" })
]
}
);
});
CarouselPrevious.displayName = "CarouselPrevious";
var CarouselNext = React2.forwardRef(({ className, variant = "ghost", size: size2 = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return /* @__PURE__ */ jsxs5(
button_default,
{
ref,
variant,
size: size2,
className: cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className
),
disabled: !canScrollNext,
onClick: scrollNext,
...props,
children: [
/* @__PURE__ */ jsx8(ArrowRight, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Next slide" })
]
}
);
});
CarouselNext.displayName = "CarouselNext";
// primitives/command.tsx
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
// primitives/dialog.tsx
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var Dialog = DialogPrimitive.Root;
var DialogTrigger = DialogPrimitive.Trigger;
var DialogPortal = DialogPrimitive.Portal;
var DialogOverlay = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx9(
DialogPrimitive.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-bg-dark/90",
className
),
...props
}
), "DialogOverlay");
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
var DialogContent = /* @__PURE__ */ __name(({
className,
children,
showCloseButton = false,
...props
}) => /* @__PURE__ */ jsxs6(DialogPortal, { children: [
/* @__PURE__ */ jsx9(DialogOverlay, {}),
/* @__PURE__ */ jsxs6(
DialogPrimitive.Content,
{
className: cn(
"bg-bg-default 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 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsxs6(
DialogPrimitive.Close,
{
className: cn(
"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
!showCloseButton && "hidden"
),
children: [
/* @__PURE__ */ jsx9(X, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Close" })
]
}
)
]
}
)
] }), "DialogContent");
DialogContent.displayName = DialogPrimitive.Content.displayName;
var DialogHeader = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx9(
"div",
{
className: cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
),
...props
}
), "DialogHeader");
DialogHeader.displayName = "DialogHeader";
var DialogFooter = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx9(
"div",
{
className: cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
),
...props
}
), "DialogFooter");
DialogFooter.displayName = "DialogFooter";
var DialogTitle = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx9(
DialogPrimitive.Title,
{
className: cn(
"text-lg leading-none font-semibold tracking-tight",
className
),
...props
}
), "DialogTitle");
DialogTitle.displayName = DialogPrimitive.Title.displayName;
var DialogDescription = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx9(
DialogPrimitive.Description,
{
className: cn("text-text-secondary text-sm", className),
...props
}
), "DialogDescription");
DialogDescription.displayName = DialogPrimitive.Description.displayName;
// primitives/command.tsx
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var Command = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(
CommandPrimitive,
{
className: cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md [&_[cmdk-list]]:scroll-pt-0 [&_[cmdk-list]]:scroll-auto",
className
),
loop: true,
...props
}
), "Command");
Command.displayName = CommandPrimitive.displayName;
var CommandDialog = /* @__PURE__ */ __name(({ children, ...props }) => {
return /* @__PURE__ */ jsx10(Dialog, { ...props, children: /* @__PURE__ */ jsx10(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx10(Command, { className: "[&_[cmdk-group-heading]]:text-text-secondary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
}, "CommandDialog");
var CommandInput = /* @__PURE__ */ __name(({
className,
ref,
...props
}) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
/* @__PURE__ */ jsx10(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
/* @__PURE__ */ jsx10(
CommandPrimitive.Input,
{
className: cn(
"placeholder:!text-text-placeholder flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
className
),
ref,
...props
}
)
] }), "CommandInput");
CommandInput.displayName = CommandPrimitive.Input.displayName;
var CommandList = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(
CommandPrimitive.List,
{
className: cn(
"max-h-[300px] scroll-pt-0 overflow-x-hidden overflow-y-auto scroll-auto",
className
),
...props
}
), "CommandList");
CommandList.displayName = CommandPrimitive.List.displayName;
var CommandEmpty = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", ...props }), "CommandEmpty");
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
var CommandGroup = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(
CommandPrimitive.Group,
{
className: cn(
"text-text-default [&_[cmdk-group-heading]]:text-text-default overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className
),
...props
}
), "CommandGroup");
CommandGroup.displayName = CommandPrimitive.Group.displayName;
var CommandSeparator = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(
CommandPrimitive.Separator,
{
className: cn("bg-divider -mx-1 h-px", className),
...props
}
), "CommandSeparator");
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
var CommandItem = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx10(
CommandPrimitive.Item,
{
className: cn(
"hover:bg-bg-secondary data-[selected=true]:text-text-default data-[selected='true']:bg-bg-secondary relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
className
),
...props
}
), "CommandItem");
CommandItem.displayName = CommandPrimitive.Item.displayName;
var CommandShortcut = /* @__PURE__ */ __name(({
className,
...props
}) => {
return /* @__PURE__ */ jsx10(
"span",
{
className: cn(
"text-text-secondary ml-auto text-xs tracking-widest",
className
),
...props
}
);
}, "CommandShortcut");
CommandShortcut.displayName = "CommandShortcut";
// primitives/collapsible.tsx
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
var Collapsible = CollapsiblePrimitive.Root;
var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
// primitives/context-menu.tsx
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
import { Check, ChevronRight as ChevronRight2, Circle } from "lucide-react";
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
var ContextMenu = ContextMenuPrimitive.Root;
var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
var ContextMenuGroup = ContextMenuPrimitive.Group;
var ContextMenuPortal = ContextMenuPrimitive.Portal;
var ContextMenuSub = ContextMenuPrimitive.Sub;
var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
var ContextMenuSubTrigger = /* @__PURE__ */ __name(({
className,
inset,
children,
ref,
...props
}) => /* @__PURE__ */ jsxs8(
ContextMenuPrimitive.SubTrigger,
{
className: cn(
"focus:bg-accent data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none focus:text-white",
inset && "pl-8",
className
),
ref,
...props,
children: [
children,
/* @__PURE__ */ jsx11(ChevronRight2, { className: "ml-auto h-4 w-4" })
]
}
), "ContextMenuSubTrigger");
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
var ContextMenuSubContent = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx11(
ContextMenuPrimitive.SubContent,
{
className: cn(
"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 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 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-gray-300 p-1 text-white shadow-md",
className
),
...props
}
), "ContextMenuSubContent");
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
var ContextMenuContent = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx11(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
ContextMenuPrimitive.Content,
{
className: cn(
"animate-in fade-in-80 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 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 z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-600 bg-gray-300 p-1 text-gray-50 shadow-md",
className
),
...props
}
) }), "ContextMenuContent");
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
var ContextMenuItem = /* @__PURE__ */ __name(({
className,
inset,
...props
}) => /* @__PURE__ */ jsx11(
ContextMenuPrimitive.Item,
{
className: cn(
"relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none focus:bg-gray-200 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
),
...props
}
), "ContextMenuItem");
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
var ContextMenuCheckboxItem = /* @__PURE__ */ __name(({
className,
children,
checked,
...props
}) => /* @__PURE__ */ jsxs8(
ContextMenuPrimitive.CheckboxItem,
{
checked,
className: cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
...props,
children: [
/* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(Check, { className: "h-4 w-4" }) }) }),
children
]
}
), "ContextMenuCheckboxItem");
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
var ContextMenuRadioItem = /* @__PURE__ */ __name(({
className,
children,
...props
}) => /* @__PURE__ */ jsxs8(
ContextMenuPrimitive.RadioItem,
{
className: cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
...props,
children: [
/* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(Circle, { className: "h-2 w-2 fill-current" }) }) }),
children
]
}
), "ContextMenuRadioItem");
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
var ContextMenuLabel = /* @__PURE__ */ __name(({
className,
inset,
...props
}) => /* @__PURE__ */ jsx11(
ContextMenuPrimitive.Label,
{
className: cn(
"text-text-default px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
),
...props
}
), "ContextMenuLabel");
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
var ContextMenuSeparator = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx11(
ContextMenuPrimitive.Separator,
{
className: cn("bg-border -mx-1 my-1 h-px", className),
...props
}
), "ContextMenuSeparator");
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
var ContextMenuShortcut = /* @__PURE__ */ __name(({
className,
...props
}) => {
return /* @__PURE__ */ jsx11(
"span",
{
className: cn(
"text-text-secondary ml-auto text-xs tracking-widest",
className
),
...props
}
);
}, "ContextMenuShortcut");
ContextMenuShortcut.displayName = "ContextMenuShortcut";
// primitives/drawer.tsx
import { Drawer as DrawerPrimitive } from "vaul";
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
var Drawer = /* @__PURE__ */ __name(({
shouldScaleBackground = false,
...props
}) => /* @__PURE__ */ jsx12(
DrawerPrimitive.Root,
{
shouldScaleBackground,
...props
}
), "Drawer");
Drawer.displayName = "Drawer";
var DrawerTrigger = DrawerPrimitive.Trigger;
var DrawerPortal = DrawerPrimitive.Portal;
var DrawerClose = DrawerPrimitive.Close;
var DrawerOverlay = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx12(
DrawerPrimitive.Overlay,
{
className: cn("fixed inset-0 z-50 bg-black/70", className),
...props
}
), "DrawerOverlay");
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
var DrawerContent = /* @__PURE__ */ __name(({
className,
children,
...props
}) => /* @__PURE__ */ jsxs9(DrawerPortal, { children: [
/* @__PURE__ */ jsx12(DrawerOverlay, {}),
/* @__PURE__ */ jsxs9(
DrawerPrimitive.Content,
{
className: cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-gray-500 px-6 pb-6 focus:outline-hidden",
className
),
...props,
children: [
/* @__PURE__ */ jsx12("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-gray-300" }),
children
]
}
)
] }), "DrawerContent");
DrawerContent.displayName = "DrawerContent";
var DrawerHeader = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx12("div", { className: cn("pt-5 pb-0", className), ...props }), "DrawerHeader");
DrawerHeader.displayName = "DrawerHeader";
var DrawerFooter = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx12(
"div",
{
className: cn("mt-auto flex flex-col gap-2 p-4", className),
...props
}
), "DrawerFooter");
DrawerFooter.displayName = "DrawerFooter";
var DrawerTitle = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx12(
DrawerPrimitive.Title,
{
className: cn(
"text-lg leading-none font-semibold tracking-tight",
className
),
...props
}
), "DrawerTitle");
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
var DrawerDescription = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx12(
DrawerPrimitive.Description,
{
className: cn("text-text-secondary text-sm", className),
...props
}
), "DrawerDescription");
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
// primitives/dropdown-menu.tsx
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check as Check2, ChevronRight as ChevronRight3 } from "lucide-react";
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
var DropdownMenu = DropdownMenuPrimitive.Root;
var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
var DropdownMenuGroup = DropdownMenuPrimitive.Group;
var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
var DropdownMenuSub = DropdownMenuPrimitive.Sub;
var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
var DropdownMenuSubTrigger = /* @__PURE__ */ __name(({
className,
inset,
children,
...props
}) => /* @__PURE__ */ jsxs10(
DropdownMenuPrimitive.SubTrigger,
{
className: cn(
"focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none",
inset && "pl-8",
className
),
...props,
children: [
children,
/* @__PURE__ */ jsx13(ChevronRight3, { className: "ml-auto h-4 w-4" })
]
}
), "DropdownMenuSubTrigger");
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
var DropdownMenuSubContent = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.SubContent,
{
className: cn(
"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 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 z-[2000000000] min-w-[8rem] space-y-3 overflow-hidden rounded-md bg-gray-300 text-white shadow-lg",
className
),
...props
}
), "DropdownMenuSubContent");
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
var DropdownMenuContent = /* @__PURE__ */ __name(({
className,
sideOffset = 4,
...props
}) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.Content,
{
className: cn(
"font-inter border-divider 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 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 bg-bg-dark z-[2000000000] min-w-[8rem] overflow-hidden rounded-lg border px-4 py-6 text-white shadow-md",
className
),
sideOffset,
...props
}
) }), "DropdownMenuContent");
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
var DropdownMenuItem = /* @__PURE__ */ __name(({
className,
inset,
...props
}) => /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.Item,
{
className: cn(
"focus:bg-bg-secondary relative flex cursor-default items-center rounded-lg px-2 py-2 text-sm outline-hidden transition-colors select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
),
...props
}
), "DropdownMenuItem");
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
var DropdownMenuCheckboxItem = /* @__PURE__ */ __name(({
className,
children,
checked,
...props
}) => /* @__PURE__ */ jsxs10(
DropdownMenuPrimitive.CheckboxItem,
{
checked,
className: cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
),
...props,
children: [
/* @__PURE__ */ jsx13("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center rounded-xs bg-gray-300", children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(Check2, { className: "h-3 w-3" }) }) }),
children
]
}
), "DropdownMenuCheckboxItem");
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
var DropdownMenuRadioItem = /* @__PURE__ */ __name(({
className,
children,
...props
}) => /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.RadioItem,
{
className: cn(
"focus:bg-bg-secondary relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"hover:bg-bg-secondary data-[state=checked]:bg-bg-secondary",
className
),
...props,
children
}
), "DropdownMenuRadioItem");
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
var DropdownMenuLabel = /* @__PURE__ */ __name(({
className,
inset,
...props
}) => /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.Label,
{
className: cn(
"text-text-secondary text-xs tracking-[2px] uppercase",
inset && "pl-8",
className
),
...props
}
), "DropdownMenuLabel");
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
var DropdownMenuSeparator = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx13(
DropdownMenuPrimitive.Separator,
{
className: cn("bg-divider -mx-1 my-1 h-px", className),
...props
}
), "DropdownMenuSeparator");
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
var DropdownMenuShortcut = /* @__PURE__ */ __name(({
className,
...props
}) => {
return /* @__PURE__ */ jsx13(
"span",
{
className: cn("ml-auto text-xs tracking-widest opacity-60", className),
...props
}
);
}, "DropdownMenuShortcut");
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
// primitives/form.tsx
import { Slot as Slot3 } from "@radix-ui/react-slot";
import * as React3 from "react";
import {
Controller,
FormProvider,
useFormContext
} from "react-hook-form";
// primitives/label.tsx
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva as cva3 } from "class-variance-authority";
import { jsx as jsx14 } from "react/jsx-runtime";
var labelVariants = cva3(
"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
);
var Label3 = /* @__PURE__ */ __name(({
className,
...props
}) => /* @__PURE__ */ jsx14(LabelPrimitive.Root, { className: cn(labelVariants(), className), ...props }), "Label");
Label3.displayName = LabelPrimitive.Root.displayName;
// primitives/form.tsx
import { jsx as jsx15 } from "react/jsx-runtime";
var Form = FormProvider;
var FormFieldContext = React3.createContext(
{}
);
var FormField = /* @__PURE__ */ __name(({
...props
}) => {
return /* @__PURE__ */ jsx15(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx15(Controller, { ...props }) });
}, "FormField");
var useFormField = /* @__PURE__ */ __name(() => {
const fieldContext = React3.useContext(FormFieldContext);
const itemContext = React3.useContext(FormItemContext);
const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>");
}
const { id } = itemContext;
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState
};
}, "useFormField");
var FormItemContext = React3.createContext(
{}
);
var FormItem = /* @__PURE__ */ __name(({
className,
...props
}) => {
const id = React3.useId();
return /* @__PURE__ */ jsx15(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx15("div", { className: cn("relative", className), ...props }) });
}, "FormItem");
FormItem.displayName = "FormItem";
var FormLabel = /* @__PURE__ */ __name(({
className,
...props
}) => {
const { error, formItemId } = useFormField();
return /* @__PURE__ */ jsx15(
Label3,
{
className: cn(
"text-text-secondary pointer-events-none absolute top-3 left-4 flex text-xs leading-tight font-medium transition-all select-none",
// input
"peer-placeholder-shown:text-text-tertiary z-[1] peer-placeholder-shown:text-base peer-placeholder-shown:leading-[2.3]",
"peer-focus:text-text-secondary peer-disabled:peer-placeholder-shown:text-text-tertiary peer-disabled:text-text-tertiary peer-focus:text-xs peer-focus:leading-tight",
// select
"peer-data-[placeholder]/select:top-5 peer-data-[placeholder]/select:text-base",
// adornment
"peer-[.adornment]/adornment:text-xs",
error && "text-red-500",
className
),
htmlFor: formItemId,
...props
}
);
}, "FormLabel");
FormLabel.displayName = "FormLabel";
var FormControl = /* @__PURE__ */ __name(({ ...props }) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return /* @__PURE__ */ jsx15(
Slot3,
{
"aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
"aria-invalid": !!error,
id: formItemId,
...props
}
);
}, "FormControl");
FormControl.displayName = "FormControl";
var FormDescription = /* @__PURE__ */ __name(({
className,
...props
}) => {
const { formDescriptionId } = useFormField();
return /* @__PURE__ */ jsx15(
"p",
{
className: cn("text-text-secondary py-1 text-[0.75rem]", className),
id: formDescriptionId,
...props
}
);
}, "FormDescription");
FormDescription.displayName = "FormDescription";
var FormMessage = /* @__PURE__ */ __name(({
className,
children,
...props
}) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null;
}
return /* @__PURE__ */ jsx15(
"p",
{