xertica-ui 1.4.3 → 1.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@
3
3
  import * as React from "react";
4
4
  import * as DialogPrimitive from "@radix-ui/react-dialog";
5
5
  import { XIcon } from "lucide-react";
6
+ import { cva, type VariantProps } from "class-variance-authority";
6
7
 
7
8
  import { cn } from "./utils";
8
9
 
@@ -46,40 +47,63 @@ const DialogOverlay = React.forwardRef<
46
47
  ))
47
48
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
48
49
 
49
- function DialogContent({
50
- className,
51
- children,
52
- showClose = true,
53
- ...props
54
- }: React.ComponentProps<typeof DialogPrimitive.Content> & { showClose?: boolean }) {
55
- return (
56
- <DialogPortal data-slot="dialog-portal">
57
- <DialogOverlay />
58
- <DialogPrimitive.Content
59
- data-slot="dialog-content"
60
- className={cn(
61
- "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-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
62
- className,
63
- )}
64
- {...props}
65
- >
66
- {children}
67
- {showClose && (
68
- <DialogPrimitive.Close className="absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
69
- <XIcon />
70
- <span className="sr-only">Close</span>
71
- </DialogPrimitive.Close>
72
- )}
73
- </DialogPrimitive.Content>
74
- </DialogPortal>
75
- );
50
+ const dialogVariants = cva(
51
+ "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 translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
52
+ {
53
+ variants: {
54
+ size: {
55
+ sm: "max-w-sm",
56
+ md: "max-w-md",
57
+ lg: "max-w-lg",
58
+ xl: "max-w-xl",
59
+ "2xl": "max-w-2xl",
60
+ "3xl": "max-w-3xl",
61
+ "4xl": "max-w-4xl",
62
+ "5xl": "max-w-5xl",
63
+ full: "max-w-[calc(100vw-2rem)]",
64
+ },
65
+ },
66
+ defaultVariants: {
67
+ size: "lg",
68
+ },
69
+ }
70
+ )
71
+
72
+ export interface DialogContentProps
73
+ extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
74
+ VariantProps<typeof dialogVariants> {
75
+ showClose?: boolean;
76
76
  }
77
77
 
78
+ const DialogContent = React.forwardRef<
79
+ React.ElementRef<typeof DialogPrimitive.Content>,
80
+ DialogContentProps
81
+ >(({ className, children, size, showClose = true, ...props }, ref) => (
82
+ <DialogPortal data-slot="dialog-portal">
83
+ <DialogOverlay />
84
+ <DialogPrimitive.Content
85
+ ref={ref}
86
+ data-slot="dialog-content"
87
+ className={cn(dialogVariants({ size, className }))}
88
+ {...props}
89
+ >
90
+ {children}
91
+ {showClose && (
92
+ <DialogPrimitive.Close className="absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
93
+ <XIcon />
94
+ <span className="sr-only">Close</span>
95
+ </DialogPrimitive.Close>
96
+ )}
97
+ </DialogPrimitive.Content>
98
+ </DialogPortal>
99
+ ))
100
+ DialogContent.displayName = DialogPrimitive.Content.displayName
101
+
78
102
  function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
79
103
  return (
80
104
  <div
81
105
  data-slot="dialog-header"
82
- className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
106
+ className={cn("flex flex-col gap-2 text-left", className)}
83
107
  {...props}
84
108
  />
85
109
  );
@@ -1,13 +1,18 @@
1
1
  import * as React from "react";
2
2
  import * as DialogPrimitive from "@radix-ui/react-dialog";
3
+ import { type VariantProps } from "class-variance-authority";
3
4
  declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
5
  declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
5
6
  declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
6
7
  declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
7
8
  declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
8
- declare function DialogContent({ className, children, showClose, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
9
+ declare const dialogVariants: (props?: ({
10
+ size?: "sm" | "lg" | "md" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | null | undefined;
11
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
12
+ export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof dialogVariants> {
9
13
  showClose?: boolean;
10
- }): import("react/jsx-runtime").JSX.Element;
14
+ }
15
+ declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
11
16
  declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
12
17
  declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
13
18
  declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
package/dist/index.es.js CHANGED
@@ -8,9 +8,9 @@ import { BarChart, CartesianGrid, XAxis, Bar } from "recharts";
8
8
  import { clsx } from "clsx";
9
9
  import { twMerge } from "tailwind-merge";
10
10
  import * as DialogPrimitive from "@radix-ui/react-dialog";
11
+ import { cva } from "class-variance-authority";
11
12
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
12
13
  import { Slot, Slottable } from "@radix-ui/react-slot";
13
- import { cva } from "class-variance-authority";
14
14
  import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
15
15
  import * as PopoverPrimitive from "@radix-ui/react-popover";
16
16
  import { toast, Toaster as Toaster$1 } from "sonner";
@@ -415,40 +415,53 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
415
415
  }
416
416
  ));
417
417
  DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
418
- function DialogContent({
419
- className,
420
- children,
421
- showClose = true,
422
- ...props
423
- }) {
424
- return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
425
- /* @__PURE__ */ jsx(DialogOverlay, {}),
426
- /* @__PURE__ */ jsxs(
427
- DialogPrimitive.Content,
428
- {
429
- "data-slot": "dialog-content",
430
- className: cn(
431
- "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-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
432
- className
433
- ),
434
- ...props,
435
- children: [
436
- children,
437
- showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
438
- /* @__PURE__ */ jsx(XIcon, {}),
439
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
440
- ] })
441
- ]
418
+ const dialogVariants = cva(
419
+ "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 translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
420
+ {
421
+ variants: {
422
+ size: {
423
+ sm: "max-w-sm",
424
+ md: "max-w-md",
425
+ lg: "max-w-lg",
426
+ xl: "max-w-xl",
427
+ "2xl": "max-w-2xl",
428
+ "3xl": "max-w-3xl",
429
+ "4xl": "max-w-4xl",
430
+ "5xl": "max-w-5xl",
431
+ full: "max-w-[calc(100vw-2rem)]"
442
432
  }
443
- )
444
- ] });
445
- }
433
+ },
434
+ defaultVariants: {
435
+ size: "lg"
436
+ }
437
+ }
438
+ );
439
+ const DialogContent = React.forwardRef(({ className, children, size, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
440
+ /* @__PURE__ */ jsx(DialogOverlay, {}),
441
+ /* @__PURE__ */ jsxs(
442
+ DialogPrimitive.Content,
443
+ {
444
+ ref,
445
+ "data-slot": "dialog-content",
446
+ className: cn(dialogVariants({ size, className })),
447
+ ...props,
448
+ children: [
449
+ children,
450
+ showClose && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
451
+ /* @__PURE__ */ jsx(XIcon, {}),
452
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
453
+ ] })
454
+ ]
455
+ }
456
+ )
457
+ ] }));
458
+ DialogContent.displayName = DialogPrimitive.Content.displayName;
446
459
  function DialogHeader({ className, ...props }) {
447
460
  return /* @__PURE__ */ jsx(
448
461
  "div",
449
462
  {
450
463
  "data-slot": "dialog-header",
451
- className: cn("flex flex-col gap-2 text-center sm:text-left", className),
464
+ className: cn("flex flex-col gap-2 text-left", className),
452
465
  ...props
453
466
  }
454
467
  );
package/dist/index.umd.js CHANGED
@@ -1,6 +1,6 @@
1
1
  (function(global, factory) {
2
- typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("framer-motion"), require("lucide-react"), require("recharts"), require("clsx"), require("tailwind-merge"), require("@radix-ui/react-dialog"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-slot"), require("class-variance-authority"), require("@radix-ui/react-scroll-area"), require("@radix-ui/react-popover"), require("sonner"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-avatar"), require("@radix-ui/react-label"), require("@radix-ui/react-tabs"), require("@radix-ui/react-checkbox"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-switch"), require("@radix-ui/react-select"), require("@radix-ui/react-progress"), require("@radix-ui/react-separator"), require("@radix-ui/react-slider"), require("react-dom/client"), require("@radix-ui/react-alert-dialog"), require("@radix-ui/react-aspect-ratio"), require("@radix-ui/react-navigation-menu"), require("@radix-ui/react-toggle"), require("@radix-ui/react-toggle-group"), require("input-otp"), require("react-hook-form"), require("react-day-picker"), require("vaul"), require("@radix-ui/react-hover-card"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-menubar"), require("cmdk"), require("@radix-ui/react-collapsible"), require("@radix-ui/react-accordion"), require("embla-carousel-react"), require("react-syntax-highlighter"), require("react-dom"), require("re-resizable")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "framer-motion", "lucide-react", "recharts", "clsx", "tailwind-merge", "@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu", "@radix-ui/react-slot", "class-variance-authority", "@radix-ui/react-scroll-area", "@radix-ui/react-popover", "sonner", "@radix-ui/react-tooltip", "@radix-ui/react-avatar", "@radix-ui/react-label", "@radix-ui/react-tabs", "@radix-ui/react-checkbox", "@radix-ui/react-radio-group", "@radix-ui/react-switch", "@radix-ui/react-select", "@radix-ui/react-progress", "@radix-ui/react-separator", "@radix-ui/react-slider", "react-dom/client", "@radix-ui/react-alert-dialog", "@radix-ui/react-aspect-ratio", "@radix-ui/react-navigation-menu", "@radix-ui/react-toggle", "@radix-ui/react-toggle-group", "input-otp", "react-hook-form", "react-day-picker", "vaul", "@radix-ui/react-hover-card", "@radix-ui/react-context-menu", "@radix-ui/react-menubar", "cmdk", "@radix-ui/react-collapsible", "@radix-ui/react-accordion", "embla-carousel-react", "react-syntax-highlighter", "react-dom", "re-resizable"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.XerticaUI = {}, global.jsxRuntime, global.React, global.framerMotion, global.lucideReact, global.Recharts, global.clsx, global.tailwindMerge, global.DialogPrimitive, global.DropdownMenuPrimitive, global.reactSlot, global.classVarianceAuthority, global.ScrollAreaPrimitive, global.PopoverPrimitive, global.sonner, global.TooltipPrimitive, global.AvatarPrimitive, global.LabelPrimitive, global.TabsPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.SelectPrimitive, global.ProgressPrimitive, global.SeparatorPrimitive, global.SliderPrimitive, global.client, global.AlertDialogPrimitive, global.AspectRatioPrimitive, global.NavigationMenuPrimitive, global.TogglePrimitive, global.ToggleGroupPrimitive, global.inputOtp, global.reactHookForm, global.reactDayPicker, global.vaul, global.HoverCardPrimitive, global.ContextMenuPrimitive, global.MenubarPrimitive, global.cmdk, global.CollapsiblePrimitive, global.AccordionPrimitive, global.useEmblaCarousel, global.reactSyntaxHighlighter, global.ReactDOM, global.reResizable));
3
- })(this, (function(exports2, jsxRuntime, React, framerMotion, lucideReact, RechartsPrimitive, clsx, tailwindMerge, DialogPrimitive, DropdownMenuPrimitive, reactSlot, classVarianceAuthority, ScrollAreaPrimitive, PopoverPrimitive, sonner, TooltipPrimitive, AvatarPrimitive, LabelPrimitive, TabsPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, SelectPrimitive, ProgressPrimitive, SeparatorPrimitive, SliderPrimitive, client, AlertDialogPrimitive, AspectRatioPrimitive, NavigationMenuPrimitive, TogglePrimitive, ToggleGroupPrimitive, inputOtp, reactHookForm, reactDayPicker, vaul, HoverCardPrimitive, ContextMenuPrimitive, MenubarPrimitive, cmdk, CollapsiblePrimitive, AccordionPrimitive, useEmblaCarousel, reactSyntaxHighlighter, reactDom, reResizable) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("framer-motion"), require("lucide-react"), require("recharts"), require("clsx"), require("tailwind-merge"), require("@radix-ui/react-dialog"), require("class-variance-authority"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-slot"), require("@radix-ui/react-scroll-area"), require("@radix-ui/react-popover"), require("sonner"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-avatar"), require("@radix-ui/react-label"), require("@radix-ui/react-tabs"), require("@radix-ui/react-checkbox"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-switch"), require("@radix-ui/react-select"), require("@radix-ui/react-progress"), require("@radix-ui/react-separator"), require("@radix-ui/react-slider"), require("react-dom/client"), require("@radix-ui/react-alert-dialog"), require("@radix-ui/react-aspect-ratio"), require("@radix-ui/react-navigation-menu"), require("@radix-ui/react-toggle"), require("@radix-ui/react-toggle-group"), require("input-otp"), require("react-hook-form"), require("react-day-picker"), require("vaul"), require("@radix-ui/react-hover-card"), require("@radix-ui/react-context-menu"), require("@radix-ui/react-menubar"), require("cmdk"), require("@radix-ui/react-collapsible"), require("@radix-ui/react-accordion"), require("embla-carousel-react"), require("react-syntax-highlighter"), require("react-dom"), require("re-resizable")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "framer-motion", "lucide-react", "recharts", "clsx", "tailwind-merge", "@radix-ui/react-dialog", "class-variance-authority", "@radix-ui/react-dropdown-menu", "@radix-ui/react-slot", "@radix-ui/react-scroll-area", "@radix-ui/react-popover", "sonner", "@radix-ui/react-tooltip", "@radix-ui/react-avatar", "@radix-ui/react-label", "@radix-ui/react-tabs", "@radix-ui/react-checkbox", "@radix-ui/react-radio-group", "@radix-ui/react-switch", "@radix-ui/react-select", "@radix-ui/react-progress", "@radix-ui/react-separator", "@radix-ui/react-slider", "react-dom/client", "@radix-ui/react-alert-dialog", "@radix-ui/react-aspect-ratio", "@radix-ui/react-navigation-menu", "@radix-ui/react-toggle", "@radix-ui/react-toggle-group", "input-otp", "react-hook-form", "react-day-picker", "vaul", "@radix-ui/react-hover-card", "@radix-ui/react-context-menu", "@radix-ui/react-menubar", "cmdk", "@radix-ui/react-collapsible", "@radix-ui/react-accordion", "embla-carousel-react", "react-syntax-highlighter", "react-dom", "re-resizable"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.XerticaUI = {}, global.jsxRuntime, global.React, global.framerMotion, global.lucideReact, global.Recharts, global.clsx, global.tailwindMerge, global.DialogPrimitive, global.classVarianceAuthority, global.DropdownMenuPrimitive, global.reactSlot, global.ScrollAreaPrimitive, global.PopoverPrimitive, global.sonner, global.TooltipPrimitive, global.AvatarPrimitive, global.LabelPrimitive, global.TabsPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.SelectPrimitive, global.ProgressPrimitive, global.SeparatorPrimitive, global.SliderPrimitive, global.client, global.AlertDialogPrimitive, global.AspectRatioPrimitive, global.NavigationMenuPrimitive, global.TogglePrimitive, global.ToggleGroupPrimitive, global.inputOtp, global.reactHookForm, global.reactDayPicker, global.vaul, global.HoverCardPrimitive, global.ContextMenuPrimitive, global.MenubarPrimitive, global.cmdk, global.CollapsiblePrimitive, global.AccordionPrimitive, global.useEmblaCarousel, global.reactSyntaxHighlighter, global.ReactDOM, global.reResizable));
3
+ })(this, (function(exports2, jsxRuntime, React, framerMotion, lucideReact, RechartsPrimitive, clsx, tailwindMerge, DialogPrimitive, classVarianceAuthority, DropdownMenuPrimitive, reactSlot, ScrollAreaPrimitive, PopoverPrimitive, sonner, TooltipPrimitive, AvatarPrimitive, LabelPrimitive, TabsPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, SelectPrimitive, ProgressPrimitive, SeparatorPrimitive, SliderPrimitive, client, AlertDialogPrimitive, AspectRatioPrimitive, NavigationMenuPrimitive, TogglePrimitive, ToggleGroupPrimitive, inputOtp, reactHookForm, reactDayPicker, vaul, HoverCardPrimitive, ContextMenuPrimitive, MenubarPrimitive, cmdk, CollapsiblePrimitive, AccordionPrimitive, useEmblaCarousel, reactSyntaxHighlighter, reactDom, reResizable) {
4
4
  "use strict";
5
5
  var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
6
6
  function _interopNamespaceDefault(e) {
@@ -416,40 +416,53 @@ ${colorConfig.map(([key, itemConfig]) => {
416
416
  }
417
417
  ));
418
418
  DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
419
- function DialogContent({
420
- className,
421
- children,
422
- showClose = true,
423
- ...props
424
- }) {
425
- return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
426
- /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
427
- /* @__PURE__ */ jsxRuntime.jsxs(
428
- DialogPrimitive__namespace.Content,
429
- {
430
- "data-slot": "dialog-content",
431
- className: cn(
432
- "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-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
433
- className
434
- ),
435
- ...props,
436
- children: [
437
- children,
438
- showClose && /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
439
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
440
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
441
- ] })
442
- ]
419
+ const dialogVariants = classVarianceAuthority.cva(
420
+ "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 translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
421
+ {
422
+ variants: {
423
+ size: {
424
+ sm: "max-w-sm",
425
+ md: "max-w-md",
426
+ lg: "max-w-lg",
427
+ xl: "max-w-xl",
428
+ "2xl": "max-w-2xl",
429
+ "3xl": "max-w-3xl",
430
+ "4xl": "max-w-4xl",
431
+ "5xl": "max-w-5xl",
432
+ full: "max-w-[calc(100vw-2rem)]"
443
433
  }
444
- )
445
- ] });
446
- }
434
+ },
435
+ defaultVariants: {
436
+ size: "lg"
437
+ }
438
+ }
439
+ );
440
+ const DialogContent = React__namespace.forwardRef(({ className, children, size, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
441
+ /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
442
+ /* @__PURE__ */ jsxRuntime.jsxs(
443
+ DialogPrimitive__namespace.Content,
444
+ {
445
+ ref,
446
+ "data-slot": "dialog-content",
447
+ className: cn(dialogVariants({ size, className })),
448
+ ...props,
449
+ children: [
450
+ children,
451
+ showClose && /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute top-4 right-4 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
452
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
453
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
454
+ ] })
455
+ ]
456
+ }
457
+ )
458
+ ] }));
459
+ DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
447
460
  function DialogHeader({ className, ...props }) {
448
461
  return /* @__PURE__ */ jsxRuntime.jsx(
449
462
  "div",
450
463
  {
451
464
  "data-slot": "dialog-header",
452
- className: cn("flex flex-col gap-2 text-center sm:text-left", className),
465
+ className: cn("flex flex-col gap-2 text-left", className),
453
466
  ...props
454
467
  }
455
468
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xertica-ui",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./dist/index.umd.js",