@stackshift-ui/dialog 1.0.0-beta.2 → 1.0.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/dialog",
   "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -38,11 +38,11 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "classnames": "^2.5.1",
     "lucide-react": "^0.468.0",
-    "@stackshift-ui/scripts": "6.1.0-beta.0",
-    "@stackshift-ui/system": "6.1.0-beta.1"
+    "@stackshift-ui/system": "6.1.0-beta.3",
+    "@stackshift-ui/scripts": "6.1.0-beta.2"
   },
   "peerDependencies": {
-    "@stackshift-ui/system": ">=6.1.0-beta.1",
+    "@stackshift-ui/system": ">=6.1.0-beta.3",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",

package/src/dialog.tsx

@@ -17,43 +17,56 @@ const displayNameFooter = "DialogFooter";
 const displayNameTitle = "DialogTitle";
 const displayNameDescription = "DialogDescription";
 
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+const Dialog = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>
+>(({ ...props }, ref) => {
   const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return <Component as={DialogPrimitive.Root} data-slot="dialog" {...props} />;
-}
+  return <Component as={DialogPrimitive.Root} ref={ref} data-slot="dialog" {...props} />;
+});
 Dialog.displayName = displayName;
 
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+const DialogTrigger = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
+>(({ ...props }, ref) => {
   const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return <Component as={DialogPrimitive.Trigger} data-slot="dialog-trigger" {...props} />;
-}
+  return <Component as={DialogPrimitive.Trigger} ref={ref} data-slot="dialog-trigger" {...props} />;
+});
 DialogTrigger.displayName = displayNameTrigger;
 
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+const DialogPortal = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Portal>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>
+>(({ ...props }, ref) => {
   const { [displayNamePortal]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return <Component as={DialogPrimitive.Portal} data-slot="dialog-portal" {...props} />;
-}
+  return <Component as={DialogPrimitive.Portal} ref={ref} data-slot="dialog-portal" {...props} />;
+});
 DialogPortal.displayName = displayNamePortal;
 
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+const DialogClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({ ...props }, ref) => {
   const { [displayNameClose]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return <Component as={DialogPrimitive.Close} data-slot="dialog-close" {...props} />;
-}
+  return <Component as={DialogPrimitive.Close} ref={ref} data-slot="dialog-close" {...props} />;
+});
 DialogClose.displayName = displayNameClose;
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
   const { [displayNameOverlay]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
       as={DialogPrimitive.Overlay}
+      ref={ref}
       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",
@@ -62,17 +75,15 @@ function DialogOverlay({
       {...props}
     />
   );
-}
+});
 DialogOverlay.displayName = displayNameOverlay;
 
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => {
   const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
@@ -80,6 +91,7 @@ function DialogContent({
       <DialogOverlay />
       <Component
         as={DialogPrimitive.Content}
+        ref={ref}
         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",
@@ -98,64 +110,77 @@ function DialogContent({
       </Component>
     </DialogPortal>
   );
-}
+});
 DialogContent.displayName = displayNameContent;
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+const DialogHeader = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => {
   const { [displayNameHeader]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
+      ref={ref}
       data-slot="dialog-header"
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
   );
-}
+});
 DialogHeader.displayName = displayNameHeader;
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+const DialogFooter = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => {
   const { [displayNameFooter]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
+      ref={ref}
       data-slot="dialog-footer"
       className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
   );
-}
+});
 DialogFooter.displayName = displayNameFooter;
 
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
   const { [displayNameTitle]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
       as={DialogPrimitive.Title}
+      ref={ref}
       data-slot="dialog-title"
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
   );
-}
+});
 DialogTitle.displayName = displayNameTitle;
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => {
   const { [displayNameDescription]: Component = DefaultComponent } = useStackShiftUIComponents();
 
   return (
     <Component
       as={DialogPrimitive.Description}
+      ref={ref}
       data-slot="dialog-description"
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
-}
+});
 DialogDescription.displayName = displayNameDescription;
 
 export {

package/dist/chunk-2VQY25ZS.mjs

@@ -1 +0,0 @@
-import*as a from"@radix-ui/react-dialog";import{XIcon as R}from"lucide-react";import{cn as l,DefaultComponent as n,useStackShiftUIComponents as s}from"@stackshift-ui/system";import{jsx as e,jsxs as r}from"react/jsx-runtime";var d="Dialog",m="DialogTrigger",p="DialogPortal",g="DialogClose",c="DialogOverlay",f="DialogContent",u="DialogHeader",D="DialogFooter",y="DialogTitle",C="DialogDescription";function b({...o}){let{[d]:t=n}=s();return e(t,{as:a.Root,"data-slot":"dialog",...o})}b.displayName=d;function T({...o}){let{[m]:t=n}=s();return e(t,{as:a.Trigger,"data-slot":"dialog-trigger",...o})}T.displayName=m;function P({...o}){let{[p]:t=n}=s();return e(t,{as:a.Portal,"data-slot":"dialog-portal",...o})}P.displayName=p;function h({...o}){let{[g]:t=n}=s();return e(t,{as:a.Close,"data-slot":"dialog-close",...o})}h.displayName=g;function v({className:o,...t}){let{[c]:i=n}=s();return e(i,{as:a.Overlay,"data-slot":"dialog-overlay",className:l("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",o),...t})}v.displayName=c;function w({className:o,children:t,showCloseButton:i=!0,...N}){let{[f]:x=n}=s();return r(P,{"data-slot":"dialog-portal",children:[e(v,{}),r(x,{as:a.Content,"data-slot":"dialog-content",className:l("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",o),...N,children:[t,i&&r(a.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:[e(R,{}),e("span",{className:"sr-only",children:"Close"})]})]})]})}w.displayName=f;function z({className:o,...t}){let{[u]:i=n}=s();return e(i,{"data-slot":"dialog-header",className:l("flex flex-col gap-2 text-center sm:text-left",o),...t})}z.displayName=u;function k({className:o,...t}){let{[D]:i=n}=s();return e(i,{"data-slot":"dialog-footer",className:l("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",o),...t})}k.displayName=D;function O({className:o,...t}){let{[y]:i=n}=s();return e(i,{as:a.Title,"data-slot":"dialog-title",className:l("text-lg leading-none font-semibold",o),...t})}O.displayName=y;function F({className:o,...t}){let{[C]:i=n}=s();return e(i,{as:a.Description,"data-slot":"dialog-description",className:l("text-muted-foreground text-sm",o),...t})}F.displayName=C;export{b as a,T as b,P as c,h as d,v as e,w as f,z as g,k as h,O as i,F as j};