@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

package/src/lib/components/ui/alert/index.js

@@ -1,17 +1,17 @@
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
-import Action from "./alert-action.svelte";
-export { alertVariants, } from "./alert.svelte";
+import Root, { alertVariants } from "./alert.jsx";
+import Description from "./alert-description.jsx";
+import Title from "./alert-title.jsx";
+import Action from "./alert-action.jsx";
 
 export {
-	Root,
-	Description,
-	Title,
-	Action,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle,
-	Action as AlertAction,
-};
+alertVariants,
+Root,
+Description,
+Title,
+Action,
+//
+Root as Alert,
+Description as AlertDescription,
+Title as AlertTitle,
+Action as AlertAction,
+};

package/src/lib/components/ui/avatar/avatar-badge.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarBadge = forwardRef(function AvatarBadge({ className, children, ...props }, ref) {
+return (
+<span
+ref={ref}
+data-slot="avatar-badge"
+className={cn(
+"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+className
+)}
+{...props}
+>
+{children}
+</span>
+);
+});
+export default AvatarBadge;

package/src/lib/components/ui/avatar/avatar-fallback.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const AvatarFallback = forwardRef(function AvatarFallback({ className, ...props }, ref) {
+return (
+<AvatarPrimitive.Fallback
+ref={ref}
+data-slot="avatar-fallback"
+className={cn(
+"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+className
+)}
+{...props}
+/>
+);
+});
+export default AvatarFallback;

package/src/lib/components/ui/avatar/avatar-group-count.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarGroupCount = forwardRef(function AvatarGroupCount({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="avatar-group-count"
+className={cn(
+"bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default AvatarGroupCount;

package/src/lib/components/ui/avatar/avatar-group.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarGroup = forwardRef(function AvatarGroup({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="avatar-group"
+className={cn(
+"cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default AvatarGroup;

package/src/lib/components/ui/avatar/avatar-image.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const AvatarImage = forwardRef(function AvatarImage({ className, ...props }, ref) {
+return (
+<AvatarPrimitive.Image
+ref={ref}
+data-slot="avatar-image"
+className={cn("rounded-full aspect-square size-full object-cover", className)}
+{...props}
+/>
+);
+});
+export default AvatarImage;

package/src/lib/components/ui/avatar/avatar.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const Avatar = forwardRef(function Avatar({ className, size = "default", ...props }, ref) {
+return (
+<AvatarPrimitive.Root
+ref={ref}
+data-slot="avatar"
+data-size={size}
+className={cn(
+"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+className
+)}
+{...props}
+/>
+);
+});
+export default Avatar;

package/src/lib/components/ui/avatar/index.js

@@ -1,22 +1,22 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
-import Badge from "./avatar-badge.svelte";
-import Group from "./avatar-group.svelte";
-import GroupCount from "./avatar-group-count.svelte";
+import Root from "./avatar.jsx";
+import Image from "./avatar-image.jsx";
+import Fallback from "./avatar-fallback.jsx";
+import Badge from "./avatar-badge.jsx";
+import Group from "./avatar-group.jsx";
+import GroupCount from "./avatar-group-count.jsx";
 
 export {
-	Root,
-	Image,
-	Fallback,
-	Badge,
-	Group,
-	GroupCount,
-	//
-	Root as Avatar,
-	Image as AvatarImage,
-	Fallback as AvatarFallback,
-	Badge as AvatarBadge,
-	Group as AvatarGroup,
-	GroupCount as AvatarGroupCount,
-};
+Root,
+Image,
+Fallback,
+Badge,
+Group,
+GroupCount,
+//
+Root as Avatar,
+Image as AvatarImage,
+Fallback as AvatarFallback,
+Badge as AvatarBadge,
+Group as AvatarGroup,
+GroupCount as AvatarGroupCount,
+};

package/src/lib/components/ui/badge/badge.jsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const badgeVariants = tv({
+base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+variants: {
+variant: {
+default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+link: "text-primary underline-offset-4 hover:underline",
+},
+},
+defaultVariants: {
+variant: "default",
+},
+});
+
+const Badge = forwardRef(function Badge({ href, className, variant = "default", children, ...props }, ref) {
+const Component = href ? "a" : "span";
+return (
+<Component ref={ref} data-slot="badge" href={href} className={cn(badgeVariants({ variant }), className)} {...props}>
+{children}
+</Component>
+);
+});
+
+export default Badge;

package/src/lib/components/ui/badge/index.js

@@ -1,2 +1,2 @@
-export { default as Badge } from "./badge.svelte";
-export { badgeVariants, } from "./badge.svelte";
+export { default as Badge } from "./badge.jsx";
+export { badgeVariants } from "./badge.jsx";

package/src/lib/components/ui/button/button.jsx

@@ -0,0 +1,100 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const buttonVariants = tv({
+base: "focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 rounded-lg font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex size-full shrink-0 items-center justify-center whitespace-nowrap transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+variants: {
+variant: {
+default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+outline: "bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+trigger: "focus-visible:ring-0",
+secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive dark:hover:bg-destructive/30",
+link: "text-primary underline-offset-4 hover:underline",
+},
+size: {
+default: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+xs: "text-xs gap-1 rounded-[min(var(--sb--radius-md),10px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+sm: "text-[0.8rem] gap-1 rounded-[min(var(--sb--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+lg: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+xl: "text-base gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-5",
+"2xl": "text-lg gap-2.5 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 [&_svg:not([class*='size-'])]:size-6",
+icon: "text-sm",
+"icon-xs": "text-xs rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+"icon-sm": "text-[0.8rem] rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+"icon-lg": "text-sm",
+"icon-xl": "text-base [&_svg:not([class*='size-'])]:size-5",
+"icon-2xl": "text-lg [&_svg:not([class*='size-'])]:size-6",
+},
+},
+defaultVariants: {
+variant: "default",
+size: "default",
+},
+});
+
+export const wrapperVariants = tv({
+base: "inline-flex shrink-0 transition-transform",
+variants: {
+size: {
+default: "h-8",
+xs: "h-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+sm: "h-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+lg: "h-9",
+xl: "h-11",
+"2xl": "h-14",
+icon: "size-8",
+"icon-xs": "size-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+"icon-sm": "size-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+"icon-lg": "size-9",
+"icon-xl": "size-11",
+"icon-2xl": "size-14",
+},
+},
+defaultVariants: {
+size: "default",
+},
+});
+
+const Button = forwardRef(function Button(
+{ className, wrapperClass = "", variant = "default", size = "default", href, type = "button", disabled, children, ...props },
+ref
+) {
+return (
+<span
+data-slot="button-wrapper"
+className={cn(wrapperVariants({ size }), wrapperClass)}
+style={{ background: "var(--sb--sc-border-color, transparent)", padding: "var(--sb--sc-border-width, 0px)" }}
+>
+{href ? (
+<a
+ref={ref}
+className={cn(buttonVariants({ variant, size }), className)}
+href={disabled ? undefined : href}
+aria-disabled={disabled}
+role={disabled ? "link" : undefined}
+tabIndex={disabled ? -1 : undefined}
+data-slot="button"
+{...props}
+>
+{children}
+</a>
+) : (
+<button
+ref={ref}
+className={cn(buttonVariants({ variant, size }), className)}
+type={type}
+disabled={disabled}
+data-slot="button"
+{...props}
+>
+{children}
+</button>
+)}
+</span>
+);
+});
+
+export default Button;

package/src/lib/components/ui/button/index.js

@@ -1,12 +1,12 @@
 import Root, {
-	buttonVariants,
-	wrapperVariants,
-} from "./button.svelte";
+buttonVariants,
+wrapperVariants,
+} from "./button.jsx";
 
 export {
-	Root,
-	//
-	Root as Button,
-	buttonVariants,
-	wrapperVariants,
-};
+Root,
+//
+Root as Button,
+buttonVariants,
+wrapperVariants,
+};

package/src/lib/components/ui/card/card-action.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardAction = forwardRef(function CardAction({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-action" className={cn("cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardAction;

package/src/lib/components/ui/card/card-content.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardContent = forwardRef(function CardContent({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-content" className={cn("px-4 group-data-[size=sm]/card:px-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardContent;

package/src/lib/components/ui/card/card-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardDescription = forwardRef(function CardDescription({ className, children, ...props }, ref) {
+return (
+<p ref={ref} data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props}>
+{children}
+</p>
+);
+});
+export default CardDescription;

package/src/lib/components/ui/card/card-footer.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardFooter = forwardRef(function CardFooter({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-footer" className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardFooter;

package/src/lib/components/ui/card/card-header.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardHeader = forwardRef(function CardHeader({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="card-header"
+className={cn(
+"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default CardHeader;

package/src/lib/components/ui/card/card-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const CardTitle = forwardRef(function CardTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="card-title" className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)} {...props}>
+{children}
+</div>
+);
+});
+export default CardTitle;

package/src/lib/components/ui/card/card.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Card = forwardRef(function Card({ className, size = "default", children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="card"
+data-size={size}
+className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default Card;

package/src/lib/components/ui/card/index.js

@@ -1,25 +1,25 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from "./card.jsx";
+import Content from "./card-content.jsx";
+import Description from "./card-description.jsx";
+import Footer from "./card-footer.jsx";
+import Header from "./card-header.jsx";
+import Title from "./card-title.jsx";
+import Action from "./card-action.jsx";
 
 export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	Action,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
-	Action as CardAction,
-};
+Root,
+Content,
+Description,
+Footer,
+Header,
+Title,
+Action,
+//
+Root as Card,
+Content as CardContent,
+Description as CardDescription,
+Footer as CardFooter,
+Header as CardHeader,
+Title as CardTitle,
+Action as CardAction,
+};

package/src/lib/components/ui/checkbox/checkbox.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const Checkbox = forwardRef(function Checkbox({ className, checked, onCheckedChange, ...props }, ref) {
+return (
+<CheckboxPrimitive.Root
+ref={ref}
+data-slot="checkbox"
+className={cn(
+"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+checked={checked}
+onCheckedChange={onCheckedChange}
+{...props}
+>
+<CheckboxPrimitive.Indicator
+data-slot="checkbox-indicator"
+className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+>
+{checked === "indeterminate" ? <Minus /> : <Check />}
+</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
+);
+});
+
+export default Checkbox;

package/src/lib/components/ui/checkbox/index.js

@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from "./checkbox.jsx";
 export {
-	Root,
-	//
-	Root as Checkbox,
-};
+Root,
+//
+Root as Checkbox,
+};

package/src/lib/components/ui/collapsible/collapsible-content.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const CollapsibleContent = forwardRef(function CollapsibleContent({ ...props }, ref) {
+return <CollapsiblePrimitive.Content ref={ref} data-slot="collapsible-content" {...props} />;
+});
+export default CollapsibleContent;

package/src/lib/components/ui/collapsible/collapsible-trigger.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ ...props }, ref) {
+return <CollapsiblePrimitive.Trigger ref={ref} data-slot="collapsible-trigger" {...props} />;
+});
+export default CollapsibleTrigger;

package/src/lib/components/ui/collapsible/collapsible.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = forwardRef(function Collapsible({ ...props }, ref) {
+return <CollapsiblePrimitive.Root ref={ref} data-slot="collapsible" {...props} />;
+});
+export default Collapsible;

package/src/lib/components/ui/collapsible/index.js

@@ -1,13 +1,13 @@
-import Root from "./collapsible.svelte";
-import Trigger from "./collapsible-trigger.svelte";
-import Content from "./collapsible-content.svelte";
+import Root from "./collapsible.jsx";
+import Trigger from "./collapsible-trigger.jsx";
+import Content from "./collapsible-content.jsx";
 
 export {
-	Root,
-	Content,
-	Trigger,
-	//
-	Root as Collapsible,
-	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger,
-};
+Root,
+Content,
+Trigger,
+//
+Root as Collapsible,
+Content as CollapsibleContent,
+Trigger as CollapsibleTrigger,
+};

package/src/lib/components/ui/dialog/dialog-close.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+const DialogClose = forwardRef(function DialogClose({ type = "button", ...props }, ref) {
+return <DialogPrimitive.Close ref={ref} data-slot="dialog-close" type={type} {...props} />;
+});
+export default DialogClose;

package/src/lib/components/ui/dialog/dialog-content.jsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import DialogOverlay from "./dialog-overlay.jsx";
+import { cn } from "../../../utils/index.js";
+import { Button } from "../../../components/ui/button/index.js";
+import { X } from "lucide-react";
+
+const DialogContent = forwardRef(function DialogContent({ className, children, showCloseButton = true, ...props }, ref) {
+return (
+<DialogPrimitive.Portal>
+<DialogOverlay />
+<DialogPrimitive.Content
+ref={ref}
+data-slot="dialog-content"
+className={cn(
+"font-sans 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 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+className
+)}
+{...props}
+>
+{children}
+{showCloseButton && (
+<DialogPrimitive.Close asChild data-slot="dialog-close">
+<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+<X />
+<span className="sr-only">Close</span>
+</Button>
+</DialogPrimitive.Close>
+)}
+</DialogPrimitive.Content>
+</DialogPrimitive.Portal>
+);
+});
+export default DialogContent;