@fileverse/ui 5.1.8 → 5.1.10-menubar-1

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;
 }
@@ -2010,6 +2019,9 @@ video {
 .min-w-\[129px\] {
   min-width: 129px;
 }
+.min-w-\[12rem\] {
+  min-width: 12rem;
+}
 .min-w-\[145px\] {
   min-width: 145px;
 }
@@ -2571,6 +2583,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 +2744,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 +2937,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 +3429,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 +3828,27 @@ 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: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));
+}
 .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';
@@ -16,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';
@@ -349,6 +352,173 @@ 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.
+ *
+ * @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 {
@@ -597,6 +767,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 {
@@ -916,7 +1143,12 @@ declare type ThemeProviderProps = {
     defaultTheme?: Theme;
 };
 
-export declare const ThemeToggle: () => JSX_2.Element;
+export declare const ThemeToggle: ({ defaultOpen }?: ThemeToggleProps) => JSX_2.Element;
+
+declare interface ThemeToggleProps {
+    /** Opens the "More themes" dropdown on first mount (uncontrolled). */
+    defaultOpen?: boolean;
+}
 
 export declare const TimePeriodSelect: React_2.ForwardRefExoticComponent<PeriodSelectorProps & React_2.RefAttributes<HTMLButtonElement>>;