@fileverse/ui 5.1.8-dropdownmenu-3 → 5.1.8-dropdownmenu-6

package/dist/index.css

@@ -541,6 +541,7 @@ video {
     --color-bg-tertiary: 195, 10%, 92%, 1; /* Tertiary */
     --color-bg-success: 126, 73%, 39%, 1;
     --color-bg-success-light: 124, 79%, 93%, 1; /* Green-100 */
+    --color-bg-info-light: 248, 100%, 97%, 1;
 
     /* Border */
     --color-border-default: 195, 10%, 92%, 1; /* Gray-200 */
@@ -571,7 +572,12 @@ video {
     --color-bg-tooltip: 0, 0%, 0%, 1; /* Black */
     --color-text-tooltip: 0, 0%, 100%, 1; /* White */
 
+    /* Inline Comment */
+    --color-inline-comment: 124, 79%, 93%, 1; /* #DDFBDF */
+    --color-inline-comment-active: 126, 74%, 73%, 1; /* #88ED92 */
+
     /* Utility */
+    --color-bg-transparent: 0, 0%, 0%, 0.04; /* Black 4% */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
 
     /* Elevation */
@@ -616,10 +622,11 @@ video {
     --color-bg-brand-light: 57, 92%, 76%, 1; /* Yellow-100 */
     --color-bg-danger: 354, 84%, 42%, 1; /* Red-200 */
     --color-bg-danger-light: 356, 100%, 97%, 1; /* Red-50 */
-    --color-bg-default-inverse: 0, 0%, 100%, 1; /* White */
+    --color-bg-default-inverse: 0, 0%, 0%, 1; /* White */
     --color-bg-tertiary: 0, 0%, 25%, 1; /* Gray-800 */
     --color-bg-success: 128, 59%, 20%, 1;
     --color-bg-success-light: 128, 59%, 20%, 1; /* Green-900 */
+    --color-bg-info-light: 254, 100%, 73%, 0.16;
 
     /* Border */
     --color-border-default: 0, 0%, 25%, 1; /* Gray-800 */
@@ -650,7 +657,12 @@ video {
     --color-bg-tooltip: 0, 0%, 100%, 1; /* White */
     --color-text-tooltip: 0, 0%, 0%, 1; /* Black */
 
+    /* Inline Comment */
+    --color-inline-comment: 128, 59%, 20%, 1; /* #15521D */
+    --color-inline-comment-active: 127, 69%, 29%, 1; /* #177E23 */
+
     /* Utility */
+    --color-bg-transparent: 0, 0%, 100%, 0.04; /* White 4% */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
 
@@ -693,6 +705,7 @@ video {
     --color-bg-tertiary: 44, 32%, 86%, 1; /* #E7E1D0 */
     --color-bg-success: 77, 23%, 35%, 1; /* #616C44 */
     --color-bg-success-light: 76, 23%, 64%, 1; /* #ADB88E */
+    --color-bg-info-light: 199, 45%, 87%, 1;
 
     /* Border */
     --color-border-default: 41, 49%, 76%, 1; /* #E0CDA4 */
@@ -723,7 +736,12 @@ video {
     --color-bg-tooltip: 28, 16%, 21%, 1; /* #3E352D */
     --color-text-tooltip: 41, 61%, 84%, 1; /* #EFDFBD */
 
+    /* Inline Comment */
+    --color-inline-comment: 76, 23%, 72%, 1; /* #BFC8A7 */
+    --color-inline-comment-active: 75, 23%, 62%, 1; /* #A9B488 */
+
     /* Utility */
+    --color-bg-transparent: 28, 16%, 21%, 0.04; /* #3E352D 4% */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
 
@@ -754,7 +772,7 @@ video {
     --color-bg-default-hover: 3, 88%, 26%, 0.08; /* #7C0E08 8% */
     --color-bg-default-active: 45, 100%, 65%, 1; /* #FFD24D */
     --color-bg-default-selected: 3, 88%, 26%, 0.06; /* #7C0E08 6% */
-    --color-bg-secondary: 345, 100%, 92%, 1; /* #FFD6E0 */
+    --color-bg-secondary: 346, 100%, 92%, 1; /* #FFD6E0 */
     --color-bg-secondary-hover: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
     --color-bg-disabled: 24, 16%, 21%, 0.04; /* #3E352D 4% */
     --color-bg-brand: 45, 100%, 65%, 1; /* #FFD24D */
@@ -762,10 +780,11 @@ video {
     --color-bg-brand-light: 45, 100%, 90%, 1; /* #FFF2CC */
     --color-bg-danger: 2, 79%, 56%, 1; /* #E73D36 */
     --color-bg-danger-light: 2, 79%, 56%, 0.14; /* #E73D36 14% */
-    --color-bg-default-inverse: 28, 16%, 21%, 1; /* #3E352D */
+    --color-bg-default-inverse: 3, 88%, 26%, 1;
     --color-bg-tertiary: 3, 88%, 26%, 0.12; /* #7C0E08 12% */
     --color-bg-success: 139, 35%, 42%, 1; /* #46905E */
     --color-bg-success-light: 140, 34%, 88%, 1; /* #D6EBDD */
+    --color-bg-info-light: 209, 89%, 88%, 1;
 
     /* Border */
     --color-border-default: 346, 100%, 90%, 1; /* #FFCCD8 */
@@ -796,7 +815,12 @@ video {
     --color-bg-tooltip: 3, 88%, 26%, 1; /* #7C0E08 */
     --color-text-tooltip: 346, 100%, 95%, 1; /* #FFE6EC */
 
+    /* Inline Comment */
+    --color-inline-comment: 139, 35%, 86%, 1; /* #CFE8D7 */
+    --color-inline-comment-active: 139, 36%, 78%, 1; /* #B3DBC0 */
+
     /* Utility */
+    --color-bg-transparent: 3, 88%, 26%, 0.04; /* #7C0E08 4% */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
 
@@ -813,7 +837,7 @@ video {
     --color-button-floating-hover: 63, 15%, 74%, 0.06; /* #C6C7B3 6% */
 
     /* Text */
-    --color-text-default: 62, 27%, 83%, 1; /* #DFE0C9 */
+    --color-text-default: 63, 27%, 83%, 1; /* #DFE0C9 */
     --color-text-secondary: 84, 5%, 56%, 1; /* #909688 */
     --color-text-disabled: 104, 7%, 42%, 1; /* #687364 */
     --color-text-danger: 2, 99%, 68%, 1; /* #FE625D */
@@ -839,6 +863,7 @@ video {
     --color-bg-tertiary: 63, 15%, 74%, 0.12; /* #C6C7B3 12% */
     --color-bg-success: 120, 46%, 55%, 1; /* #59C259 */
     --color-bg-success-light: 120, 46%, 55%, 0.16; /* #59C259 16% */
+    --color-bg-info-light: 197, 78%, 64%, 0.16;
 
     /* Border */
     --color-border-default: 120, 8%, 30%, 1; /* #465346 */
@@ -869,7 +894,12 @@ video {
     --color-bg-tooltip: 120, 9%, 76%, 1; /* #BCC7BC */
     --color-text-tooltip: 120, 9%, 24%, 1; /* #384338 */
 
+    /* Inline Comment */
+    --color-inline-comment: 120, 47%, 20%, 1; /* #1B4B1B */
+    --color-inline-comment-active: 120, 47%, 28%, 1; /* #266826 */
+
     /* Utility */
+    --color-bg-transparent: 63, 15%, 74%, 0.04; /* #C6C7B3 4% */
     --color-utility-overlay: 0, 0%, 0%, 0.72; /* Black 72% */
   }
   * {
@@ -1107,6 +1137,10 @@ video {
     background-color: hsl(var(--color-bg-success-light));
   }
 
+  .color-bg-info-light {
+    background-color: hsl(var(--color-bg-info-light));
+  }
+
   .color-bg-success {
     background-color: hsl(var(--color-bg-success));
   }
@@ -1127,6 +1161,10 @@ video {
     color: hsl(var(--color-text-tooltip));
   }
 
+  .color-bg-transparent {
+    background-color: hsl(var(--color-bg-transparent));
+  }
+
   .color-button-default {
     background-color: hsl(var(--color-button-default));
     border-color: hsl(var(--color-button-default));
@@ -1197,6 +1235,18 @@ video {
     border-color: hsl(var(--color-border-focused));
   }
 
+  .color-border-warning {
+    border-color: hsl(var(--color-border-warning));
+  }
+
+  .color-border-success {
+    border-color: hsl(var(--color-border-success));
+  }
+
+  .color-border-info {
+    border-color: hsl(var(--color-border-info));
+  }
+
   .color-border-danger {
     border-color: hsl(var(--color-border-danger));
   }
@@ -1626,6 +1676,9 @@ video {
 .h-14 {
   height: 3.5rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -1790,6 +1843,9 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: 0.5rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -1817,6 +1873,9 @@ video {
 .w-52 {
   width: 13rem;
 }
+.w-56 {
+  width: 14rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -2521,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));
 }
@@ -2679,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;
 }
@@ -2866,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;
 }
@@ -3352,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));
   }
@@ -3745,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 {
@@ -1026,6 +1198,7 @@ export declare const Tooltip: React_2.ForwardRefExoticComponent<TooltipProps & R
 export declare interface TooltipProps extends React_2.HTMLAttributes<HTMLElement>, VariantProps<typeof tooltipVariants> {
     text: string | React_2.ReactNode;
     sideOffset?: number;
+    asTriggerChild?: boolean;
     open?: boolean;
 }