@fileverse/ui 5.1.10 → 5.2.0-dialog-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);
 }
@@ -2019,6 +2036,9 @@ video {
 .min-w-\[129px\] {
   min-width: 129px;
 }
+.min-w-\[12rem\] {
+  min-width: 12rem;
+}
 .min-w-\[145px\] {
   min-width: 145px;
 }
@@ -2074,6 +2094,9 @@ video {
 .max-w-\[172px\] {
   max-width: 172px;
 }
+.max-w-\[394px\] {
+  max-width: 394px;
+}
 .max-w-\[440px\] {
   max-width: 440px;
 }
@@ -2560,6 +2583,9 @@ video {
 .\!bg-transparent {
   background-color: transparent !important;
 }
+.bg-\[hsl\(var\(--color-border-default\)\)\] {
+  background-color: hsl(var(--color-border-default));
+}
 .bg-black\/5 {
   background-color: rgb(0 0 0 / 0.05);
 }
@@ -3837,6 +3863,12 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
   outline-color: transparent !important;
 }
+.data-\[highlighted\]\:focus-visible\:outline:focus-visible[data-highlighted] {
+  outline-style: solid;
+}
+.data-\[highlighted\]\:focus-visible\:outline-2:focus-visible[data-highlighted] {
+  outline-width: 2px;
+}
 .data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
   outline-color: hsl(var(--color-border-focused));
 }

package/dist/index.es.d.ts

@@ -17,12 +17,14 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Portal } from 'vaul';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { Scope } from '@radix-ui/react-context';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { SetStateAction } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -277,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;
@@ -299,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>>;
@@ -765,6 +836,63 @@ export declare interface LucideIconProps extends Omit<SvgProps, "name">, Variant
     strokeWidth?: number;
 }
 
+/**
+ * `Menubar` — a horizontal, Google-Docs-style menu bar. Built on Radix UI's
+ * Menubar primitive and styled with the Fileverse design system.
+ *
+ * Composition-first: same part structure as `DropdownMenu`, plus a
+ * `MenubarMenu` wrapper per top-level menu.
+ *
+ * @see Radix primitive — https://www.radix-ui.com/primitives/docs/components/menubar
+ */
+export declare const Menubar: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarCheckboxItem: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarContent: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarGroup: React_2.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarItem: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarLabel: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/** One top-level menu (trigger + content). Direct child of {@link Menubar}. */
+export declare const MenubarMenu: {
+    (props: MenubarPrimitive.MenubarMenuProps & {
+        __scopeMenubar?: Scope;
+    }): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const MenubarPortal: React_2.FC<MenubarPrimitive.MenubarPortalProps>;
+
+export declare const MenubarRadioGroup: React_2.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarRadioItem: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarSeparator: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarShortcut: {
+    ({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const MenubarSub: React_2.FC<MenubarPrimitive.MenubarSubProps>;
+
+export declare const MenubarSubContent: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const MenubarSubTrigger: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Top-level menu button ("File", "Edit", …). Highlights while its menu is open. */
+export declare const MenubarTrigger: React_2.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
 declare type Period = "AM" | "PM";
 
 declare interface PeriodSelectorProps {