@fileverse/ui 5.2.0 → 5.2.1

package/dist/index.css

@@ -1388,6 +1388,17 @@ video {
     border-radius: 8px;
     border-width: 4px;
   }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1504,6 +1515,9 @@ video {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-3 {
   top: 0.75rem;
 }
@@ -1975,6 +1989,9 @@ video {
 .w-\[8px\] {
   width: 8px;
 }
+.w-\[92\.5vw\] {
+  width: 92.5vw;
+}
 .w-\[calc\(100vw-24px\)\] {
   width: calc(100vw - 24px);
 }
@@ -2077,6 +2094,9 @@ video {
 .max-w-\[172px\] {
   max-width: 172px;
 }
+.max-w-\[394px\] {
+  max-width: 394px;
+}
 .max-w-\[440px\] {
   max-width: 440px;
 }

package/dist/index.es.d.ts

@@ -279,6 +279,34 @@ export declare const DialogClose: React_2.ForwardRefExoticComponent<DialogPrimit
 
 export declare const DialogContent: React_2.ForwardRefExoticComponent<DialogContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * `DialogContentPrimitive` — the raw, unstyled Radix Dialog Content.
+ *
+ * Unlike {@link DialogContent}, this ships **no** styling, no portal, no
+ * overlay, and no close icon. Reach for it when the opinionated `DialogContent`
+ * gets in the way — e.g. custom centering, shared-element / layout animations
+ * (its default `translate(-50%,-50%)` centering conflicts with transform-driven
+ * animation), or when you need `asChild` to render your own element.
+ *
+ * Composition-first: assemble it yourself with {@link DialogPortal} and
+ * {@link DialogOverlay}. For the common "centered panel" case, prefer
+ * {@link DialogShell}, which wires those up for you.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogPortal>
+ *     <DialogOverlay />
+ *     <DialogContentPrimitive className="fixed inset-0 flex items-center justify-center">
+ *       <DialogTitle className="sr-only">…</DialogTitle>
+ *       <div className="rounded-lg color-bg-default">…</div>
+ *     </DialogContentPrimitive>
+ *   </DialogPortal>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogContentPrimitive: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
 declare interface DialogContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     hasCloseIcon?: boolean;
     dismissable?: boolean;
@@ -301,6 +329,47 @@ export declare const DialogOverlay: React_2.ForwardRefExoticComponent<Omit<Dialo
 
 export declare const DialogPortal: React_2.FC<DialogPrimitive.DialogPortalProps>;
 
+/**
+ * `DialogShell` — a centered dialog that leaves the panel styling entirely to
+ * you, built for custom and **animated** content.
+ *
+ * It centers via flexbox (a full-screen `pointer-events-none` wrapper) rather
+ * than a CSS transform, so nothing sits on a transformed ancestor — making it
+ * safe for framer-motion layout / shared-element (`layoutId`) animations that
+ * {@link DialogContent} would break. Because the wrapper is transparent to
+ * pointer events, backdrop clicks reach the overlay and Radix's own
+ * outside-click dismissal keeps working; Escape and focus management come from
+ * Radix as usual.
+ *
+ * You provide the panel as `children` (style it however you like — including a
+ * `motion.div`); render your own close affordance with {@link DialogClose}.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogShell>
+ *     <DialogTitle className="sr-only">Announcement</DialogTitle>
+ *     <div className="w-[92.5vw] max-w-[394px] rounded-xl color-bg-default">
+ *       <DialogClose className="absolute top-2 right-2">
+ *         <LucideIcon name="X" className="h-5 w-5" />
+ *       </DialogClose>
+ *       …
+ *     </div>
+ *   </DialogShell>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogShell: React_2.ForwardRefExoticComponent<DialogShellProps & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface DialogShellProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Classes for the dimming {@link DialogOverlay}. */
+    overlayClasses?: string;
+    /** Classes for the full-screen flex-centering wrapper around the panel. */
+    containerClassName?: string;
+    /** When `false`, clicking the backdrop / pressing Escape won't close. Default `true`. */
+    dismissable?: boolean;
+}
+
 export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
 
 export declare const DialogTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;