@fileverse/ui 5.1.8 → 5.1.9

package/dist/index.css

@@ -1676,6 +1676,9 @@ video {
 .h-14 {
   height: 3.5rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -1840,6 +1843,9 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: 0.5rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -1867,6 +1873,9 @@ video {
 .w-52 {
   width: 13rem;
 }
+.w-56 {
+  width: 14rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -2571,6 +2580,9 @@ video {
 .bg-none {
   background-image: none;
 }
+.fill-current {
+  fill: currentColor;
+}
 .stroke-\[hsl\(var\(--color-bg-default\)\)\] {
   stroke: hsl(var(--color-bg-default));
 }
@@ -2729,9 +2741,15 @@ video {
 .pl-6 {
   padding-left: 1.5rem;
 }
+.pl-8 {
+  padding-left: 2rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }
+.pr-2 {
+  padding-right: 0.5rem;
+}
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -2916,6 +2934,12 @@ video {
 .outline-1 {
   outline-width: 1px;
 }
+.-outline-offset-\[0\.5px\] {
+  outline-offset: -0.5px;
+}
+.-outline-offset-\[1px\] {
+  outline-offset: -1px;
+}
 .outline-offset-\[-1px\] {
   outline-offset: -1px;
 }
@@ -3402,6 +3426,12 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[disabled\]\:color-text-disabled[data-disabled] {
     color: hsl(var(--color-text-disabled));
   }
+.data-\[highlighted\]\:color-bg-default-hover[data-highlighted] {
+    background-color: hsl(var(--color-bg-default-hover));
+  }
+.data-\[state\=open\]\:color-bg-default-hover[data-state="open"] {
+    background-color: hsl(var(--color-bg-default-hover));
+  }
 .data-\[state\=unchecked\]\:color-bg-default-hover[data-state="unchecked"] {
     background-color: hsl(var(--color-bg-default-hover));
   }
@@ -3795,6 +3825,21 @@ textarea:is(:-webkit-autofill, :autofill) {
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
+.data-\[highlighted\]\:hover\:bg-\[hsl\(var\(--color-bg-default-hover\)\)\]:hover[data-highlighted] {
+  background-color: hsl(var(--color-bg-default-hover));
+}
+.data-\[highlighted\]\:hover\:\!outline-0:hover[data-highlighted] {
+  outline-width: 0px !important;
+}
+.data-\[highlighted\]\:hover\:outline-0:hover[data-highlighted] {
+  outline-width: 0px;
+}
+.data-\[highlighted\]\:hover\:\!outline-transparent:hover[data-highlighted] {
+  outline-color: transparent !important;
+}
+.data-\[highlighted\]\:focus-visible\:outline-\[hsl\(var\(--color-border-focused\)\)\]:focus-visible[data-highlighted] {
+  outline-color: hsl(var(--color-border-focused));
+}
 .dark\:\!text-\[\#363B3F\]:is(.dark *) {
   --tw-text-opacity: 1 !important;
   color: rgb(54 59 63 / var(--tw-text-opacity, 1)) !important;

package/dist/index.es.d.ts

@@ -7,6 +7,7 @@ import { default as default_2 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import { Drawer as Drawer_2 } from 'vaul';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { EmojiClickData } from 'emoji-picker-react';
 import { default as EmojiPicker } from 'emoji-picker-react';
 import { EmojiStyle } from 'emoji-picker-react';
@@ -349,6 +350,177 @@ export declare const DrawerTitle: React_2.ForwardRefExoticComponent<Omit<DialogP
 
 export declare const DrawerTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * `DropdownMenu` — a menu of actions or options shown when a button is
+ * activated. Built on Radix UI's DropdownMenu primitive and styled with the
+ * Fileverse design system.
+ *
+ * Composition-first: import the parts you need and assemble them. Every part
+ * forwards its `ref` and spreads props onto the underlying Radix primitive, so
+ * any Radix prop works without extra wiring.
+ *
+ * Parts: {@link DropdownMenuTrigger}, {@link DropdownMenuContent},
+ * {@link DropdownMenuItem}, {@link DropdownMenuCheckboxItem},
+ * {@link DropdownMenuRadioGroup}/{@link DropdownMenuRadioItem},
+ * {@link DropdownMenuLabel}, {@link DropdownMenuSeparator},
+ * {@link DropdownMenuShortcut}, {@link DropdownMenuGroup},
+ * {@link DropdownMenuSub}/{@link DropdownMenuSubTrigger}/{@link DropdownMenuSubContent},
+ * {@link DropdownMenuPortal}, {@link DropdownMenuArrow}.
+ *
+ * @example Basic menu
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button>Open</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="start">
+ *     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>
+ *       Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem disabled>Log out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example Checkbox items, a radio group, and a nested sub-menu
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <DropdownMenuCheckboxItem checked={show} onCheckedChange={setShow}>
+ *     Show panel
+ *   </DropdownMenuCheckboxItem>
+ *   <DropdownMenuRadioGroup value={pos} onValueChange={setPos}>
+ *     <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+ *     <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+ *   </DropdownMenuRadioGroup>
+ *   <DropdownMenuSub>
+ *     <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+ *     <DropdownMenuSubContent>
+ *       <DropdownMenuItem>Email</DropdownMenuItem>
+ *     </DropdownMenuSubContent>
+ *   </DropdownMenuSub>
+ * </DropdownMenuContent>
+ * ```
+ *
+ * @see Storybook — https://fileverse-ui.vercel.app/?path=/docs/components-dropdownmenu--docs
+ * @see Radix primitive — https://www.radix-ui.com/primitives/docs/components/dropdown-menu
+ *
+ * @remarks
+ * The root. Manages open state and must wrap the trigger and content. Pass
+ * `open` / `onOpenChange` to control it, or `defaultOpen` for the uncontrolled
+ * case.
+ */
+export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+
+/**
+ * Optional arrow pointing at the trigger. Not rendered by default — drop it
+ * inside {@link DropdownMenuContent} to opt in.
+ */
+export declare const DropdownMenuArrow: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuArrowProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/**
+ * A toggleable item with a check indicator. Controlled via `checked` /
+ * `onCheckedChange`; `checked` also accepts `"indeterminate"`.
+ */
+export declare const DropdownMenuCheckboxItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Floating panel that holds the menu's items. Portaled automatically.
+ * Position it with `side` / `align` / `sideOffset` (defaults to `4`).
+ */
+export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Groups related {@link DropdownMenuItem}s for semantics/accessibility. Pair
+ * with a {@link DropdownMenuLabel} to title the group.
+ */
+export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A selectable action. Wire up `onSelect`, set `disabled`, or use `inset` to
+ * align its label with sibling checkbox/radio items.
+ */
+export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Non-interactive heading for a section of items. Use `inset` to align it with
+ * sibling checkbox/radio items.
+ */
+export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Renders menu content into a portal. {@link DropdownMenuContent} already
+ * portals its children, so reach for this only when you need to control the
+ * portal container yourself.
+ */
+export declare const DropdownMenuPortal: React_2.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+
+/**
+ * Wraps {@link DropdownMenuRadioItem}s so only one can be selected at a time.
+ * Controlled via `value` / `onValueChange`.
+ */
+export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A single-choice item with a dot indicator. Must live inside a
+ * {@link DropdownMenuRadioGroup}; identified by its `value`.
+ */
+export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Thin horizontal divider between groups of items. */
+export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Right-aligned, muted hint for a keyboard shortcut. Purely presentational —
+ * render it as the trailing child of a {@link DropdownMenuItem}. It does not
+ * register the shortcut.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuItem>Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut></DropdownMenuItem>
+ * ```
+ */
+export declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * Wraps a {@link DropdownMenuSubTrigger} and a {@link DropdownMenuSubContent}
+ * to create a nested sub-menu.
+ */
+export declare const DropdownMenuSub: React_2.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+
+/** Floating panel that holds a sub-menu's items. Belongs inside {@link DropdownMenuSub}. */
+export declare const DropdownMenuSubContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Trigger row inside {@link DropdownMenuContent} that opens a nested sub-menu.
+ * Shows a trailing chevron. Set `inset` to align its label with sibling
+ * checkbox/radio items.
+ */
+export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Button that opens the menu. Use `asChild` to render your own element (e.g.
+ * `Button` / `IconButton`) as the trigger instead of the default `<button>`.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuTrigger asChild>
+ *   <Button>Open</Button>
+ * </DropdownMenuTrigger>
+ * ```
+ */
+export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
 export declare const DynamicAlert: ({ title, description, variant, icon, className, iconClassName, ...props }: DynamicAlertProps) => JSX_2.Element;
 
 export declare interface DynamicAlertProps {