@contractspec/lib.ui-kit-web 1.57.0 → 1.59.0

package/dist/browser/ui/datetime-picker.js

@@ -0,0 +1,489 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/input.tsx
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxDEV2("input", {
+    type,
+    "data-slot": "input",
+    className: cn2("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/calendar.tsx
+import * as React2 from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "lucide-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsxDEV3(DayPicker, {
+    showOutsideDays,
+    className: cn3("group/calendar bg-background p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+    captionLayout,
+    formatters: {
+      formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+      ...formatters
+    },
+    classNames: {
+      root: cn3("w-fit", defaultClassNames.root),
+      months: cn3("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+      month: cn3("flex w-full flex-col gap-4", defaultClassNames.month),
+      nav: cn3("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+      button_previous: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+      button_next: cn3(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+      month_caption: cn3("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+      dropdowns: cn3("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+      dropdown_root: cn3("has-focus:border-ring has-focus:ring-ring/50 border-input relative rounded-md border shadow-2xs has-focus:ring-[3px]", defaultClassNames.dropdown_root),
+      dropdown: cn3("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+      caption_label: cn3("font-medium select-none", captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+      table: "w-full border-collapse",
+      weekdays: cn3("flex", defaultClassNames.weekdays),
+      weekday: cn3("text-muted-foreground flex-1 rounded-md text-[0.8rem] font-normal select-none", defaultClassNames.weekday),
+      week: cn3("mt-2 flex w-full", defaultClassNames.week),
+      week_number_header: cn3("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+      week_number: cn3("text-muted-foreground text-[0.8rem] select-none", defaultClassNames.week_number),
+      day: cn3("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+      range_start: cn3("bg-accent rounded-l-md", defaultClassNames.range_start),
+      range_middle: cn3("rounded-none", defaultClassNames.range_middle),
+      range_end: cn3("bg-accent rounded-r-md", defaultClassNames.range_end),
+      today: cn3("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+      outside: cn3("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+      disabled: cn3("text-muted-foreground opacity-50", defaultClassNames.disabled),
+      hidden: cn3("invisible", defaultClassNames.hidden),
+      ...classNames
+    },
+    components: {
+      Root: ({ className: className2, rootRef, ...props2 }) => {
+        return /* @__PURE__ */ jsxDEV3("div", {
+          "data-slot": "calendar",
+          ref: rootRef,
+          className: cn3(className2),
+          ...props2
+        }, undefined, false, undefined, this);
+      },
+      Chevron: ({ className: className2, orientation, ...props2 }) => {
+        if (orientation === "left") {
+          return /* @__PURE__ */ jsxDEV3(ChevronLeftIcon, {
+            className: cn3("size-4", className2),
+            ...props2
+          }, undefined, false, undefined, this);
+        }
+        if (orientation === "right") {
+          return /* @__PURE__ */ jsxDEV3(ChevronRightIcon, {
+            className: cn3("size-4", className2),
+            ...props2
+          }, undefined, false, undefined, this);
+        }
+        return /* @__PURE__ */ jsxDEV3(ChevronDownIcon, {
+          className: cn3("size-4", className2),
+          ...props2
+        }, undefined, false, undefined, this);
+      },
+      DayButton: CalendarDayButton,
+      WeekNumber: ({ children, ...props2 }) => {
+        return /* @__PURE__ */ jsxDEV3("td", {
+          ...props2,
+          children: /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex size-(--cell-size) items-center justify-center text-center",
+            children
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this);
+      },
+      ...components
+    },
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    if (modifiers.focused)
+      ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsxDEV3(Button, {
+    ref,
+    variant: "ghost",
+    size: "icon",
+    "data-day": day.date.toLocaleDateString(),
+    "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+    "data-range-start": modifiers.range_start,
+    "data-range-end": modifiers.range_end,
+    "data-range-middle": modifiers.range_middle,
+    className: cn3("data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Root, {
+    "data-slot": "popover",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Trigger, {
+    "data-slot": "popover-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Content, {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn4("bg-popover text-popover-foreground 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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(PopoverPrimitive.Anchor, {
+    "data-slot": "popover-anchor",
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/date-picker.tsx
+import * as React3 from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function DatePicker({
+  value,
+  onChange,
+  disabled,
+  minDate,
+  maxDate,
+  placeholder = "Select date",
+  className,
+  language
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const [month, setMonth] = React3.useState(value ?? new Date);
+  const [textValue, setTextValue] = React3.useState(formatDate(value));
+  React3.useEffect(() => {
+    setTextValue(formatDate(value));
+    if (value)
+      setMonth(value);
+  }, [value]);
+  function formatDate(date) {
+    if (!date)
+      return "";
+    return date.toLocaleDateString(language, {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    });
+  }
+  function isValidDate(date) {
+    if (!date)
+      return false;
+    return !isNaN(date.getTime());
+  }
+  function isWithinRange(date) {
+    if (minDate && date < minDate)
+      return false;
+    if (maxDate && date > maxDate)
+      return false;
+    return true;
+  }
+  return /* @__PURE__ */ jsxDEV5(Popover, {
+    open,
+    onOpenChange: setOpen,
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: cn5("relative w-full", className),
+        children: [
+          /* @__PURE__ */ jsxDEV5(Input, {
+            value: textValue,
+            placeholder,
+            onChange: (e) => {
+              const nextText = e.currentTarget.value;
+              setTextValue(nextText);
+              const parsed = new Date(nextText);
+              if (isValidDate(parsed) && isWithinRange(parsed)) {
+                onChange(parsed);
+                setMonth(parsed);
+              }
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            },
+            disabled,
+            className: cn5("pr-10")
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(PopoverTrigger, {
+            asChild: true,
+            children: /* @__PURE__ */ jsxDEV5(Button, {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "absolute top-1/2 right-1 -translate-y-1/2",
+              disabled,
+              "aria-label": "Open date picker",
+              children: /* @__PURE__ */ jsxDEV5(CalendarIcon, {
+                className: "size-4"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(PopoverContent, {
+        className: "w-auto overflow-hidden p-0",
+        align: "end",
+        sideOffset: 10,
+        alignOffset: -8,
+        children: /* @__PURE__ */ jsxDEV5(Calendar, {
+          mode: "single",
+          selected: value ?? undefined,
+          captionLayout: "dropdown",
+          month,
+          onMonthChange: setMonth,
+          onSelect: (d) => {
+            onChange(d ?? null);
+            setTextValue(formatDate(d ?? null));
+            if (d)
+              setOpen(false);
+          },
+          fromDate: minDate,
+          toDate: maxDate,
+          initialFocus: true
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/time-picker.tsx
+import * as React4 from "react";
+import { cn as cn6 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function formatTime(d, is24Hour) {
+  if (!d)
+    return "";
+  return d.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !is24Hour
+  });
+}
+function TimePicker({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Select time",
+  is24Hour = true,
+  className
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const [hours, setHours] = React4.useState(() => value ? String(value.getHours()).padStart(2, "0") : "");
+  const [minutes, setMinutes] = React4.useState(() => value ? String(value.getMinutes()).padStart(2, "0") : "");
+  const commit = (h, m) => {
+    const base = value ?? new Date;
+    const next = new Date(base);
+    next.setHours(h, m, 0, 0);
+    onChange(next);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxDEV6(Popover, {
+    open,
+    onOpenChange: setOpen,
+    children: [
+      /* @__PURE__ */ jsxDEV6(PopoverTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV6(Button, {
+          type: "button",
+          variant: "outline",
+          disabled,
+          className: cn6("w-full justify-start text-left font-normal", className),
+          children: value ? formatTime(value, is24Hour) : /* @__PURE__ */ jsxDEV6("span", {
+            className: "opacity-50",
+            children: placeholder
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(PopoverContent, {
+        className: "w-56",
+        align: "start",
+        children: /* @__PURE__ */ jsxDEV6("div", {
+          className: "flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxDEV6("input", {
+              type: "number",
+              min: 0,
+              max: is24Hour ? 23 : 12,
+              value: hours,
+              onChange: (e) => setHours(e.target.value),
+              className: "border-input bg-background w-16 rounded-md border px-2 py-1 text-center"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV6("span", {
+              children: ":"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV6("input", {
+              type: "number",
+              min: 0,
+              max: 59,
+              value: minutes,
+              onChange: (e) => setMinutes(e.target.value),
+              className: "border-input bg-background w-16 rounded-md border px-2 py-1 text-center"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV6(Button, {
+              type: "button",
+              onClick: () => commit(Number(hours || 0), Number(minutes || 0)),
+              className: "ml-auto",
+              children: "Set"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// ui/datetime-picker.tsx
+import { cn as cn7 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+function DateTimePicker({
+  value,
+  onChange,
+  disabled,
+  minDate,
+  maxDate,
+  datePlaceholder,
+  timePlaceholder,
+  is24Hour,
+  className
+}) {
+  const handleDate = (d) => {
+    if (!d)
+      return;
+    const next = new Date(d);
+    if (value)
+      next.setHours(value.getHours(), value.getMinutes(), 0, 0);
+    onChange(next);
+  };
+  const handleTime = (t) => {
+    if (!t)
+      return;
+    const next = new Date(value ?? new Date);
+    next.setHours(t.getHours(), t.getMinutes(), 0, 0);
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxDEV7("div", {
+    className: cn7("flex gap-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV7(DatePicker, {
+        value,
+        onChange: handleDate,
+        disabled,
+        minDate,
+        maxDate,
+        placeholder: datePlaceholder
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV7(TimePicker, {
+        value,
+        onChange: handleTime,
+        disabled,
+        is24Hour,
+        placeholder: timePlaceholder
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  DateTimePicker
+};

package/dist/browser/ui/dialog.js

@@ -0,0 +1,140 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Root, {
+    "data-slot": "dialog",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Trigger, {
+    "data-slot": "dialog-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Portal, {
+    "data-slot": "dialog-portal",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Close, {
+    "data-slot": "dialog-close",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(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-black/50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPortal, {
+    "data-slot": "dialog-portal",
+    children: [
+      /* @__PURE__ */ jsxDEV(DialogOverlay, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(DialogPrimitive.Content, {
+        "data-slot": "dialog-content",
+        className: cn("bg-background 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-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxDEV(DialogPrimitive.Close, {
+            "data-slot": "dialog-close",
+            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            children: [
+              /* @__PURE__ */ jsxDEV(XIcon, {}, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "sr-only",
+                children: "Close"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "dialog-header",
+    className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "dialog-footer",
+    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Title, {
+    "data-slot": "dialog-title",
+    className: cn("text-lg leading-none font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Description, {
+    "data-slot": "dialog-description",
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  DialogTrigger,
+  DialogTitle,
+  DialogPortal,
+  DialogOverlay,
+  DialogHeader,
+  DialogFooter,
+  DialogDescription,
+  DialogContent,
+  DialogClose,
+  Dialog
+};