moduix 0.11.0 → 0.11.2

package/dist/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,308 @@
+@layer ui.components {
+  ._di0eq_trigger {
+    box-sizing: border-box;
+    outline: 0;
+    margin: 0;
+
+    &:focus-visible {
+      outline: var(--border-width-sm) solid var(--context-menu-focus-ring-color, var(--color-ring));
+      outline-offset: 0;
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--context-menu-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._di0eq_iconSvg {
+    width: 100%;
+    height: 100%;
+  }
+
+  ._di0eq_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--context-menu-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--context-menu-backdrop-blur, 4px)));
+    transition: opacity
+        var(--context-menu-backdrop-transition, var(--context-menu-transition, var(--transition-default))),
+      backdrop-filter
+        var(--context-menu-backdrop-transition, var(--context-menu-transition, var(--transition-default)));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  ._di0eq_positioner {
+    z-index: var(--z-popup);
+    outline: 0;
+  }
+
+  ._di0eq_popup {
+    box-sizing: border-box;
+    min-width: min(var(--context-menu-popup-min-width, 12rem), var(--available-width, 100vw));
+    max-width: min(var(--context-menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    max-height: min(var(--context-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    overscroll-behavior: contain;
+    padding-block: var(--context-menu-popup-padding-y, .25rem);
+    border: var(--border-width-sm) solid var(--context-menu-popup-border-color, var(--color-border));
+    border-radius: var(--context-menu-popup-radius, var(--radius-md));
+    background-color: var(--context-menu-popup-bg, var(--color-popover));
+    color: var(--context-menu-popup-color, var(--color-popover-foreground));
+    box-shadow: var(--context-menu-popup-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: transform var(--context-menu-transition, var(--transition-default)),
+      opacity var(--context-menu-transition, var(--transition-default));
+    outline: 0;
+    overflow-y: auto;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--context-menu-popup-scale, var(--scale-popup)));
+    }
+  }
+
+  ._di0eq_arrow {
+    color: var(--context-menu-popup-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--context-menu-arrow-size, .5rem) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--context-menu-arrow-size, .5rem) * -1);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: calc(var(--context-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: calc(var(--context-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: -90deg;
+    }
+  }
+
+  ._di0eq_arrowFill {
+    fill: currentColor;
+  }
+
+  ._di0eq_arrowOuterStroke {
+    fill: var(--context-menu-arrow-stroke-color, var(--context-menu-popup-border-color, var(--color-border)));
+  }
+
+  ._di0eq_arrowInnerStroke {
+    fill: var(--context-menu-popup-bg, var(--color-popover));
+  }
+
+  ._di0eq_item, ._di0eq_linkItem, ._di0eq_submenuTrigger, ._di0eq_radioItem, ._di0eq_checkboxItem {
+    box-sizing: border-box;
+    min-height: var(--context-menu-item-height, var(--popup-item-min-height, 2rem));
+    background: var(--context-menu-item-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: var(--context-menu-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--context-menu-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    cursor: default;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+
+    &[data-highlighted] {
+      z-index: 0;
+      color: var(--context-menu-highlight-color, var(--color-background));
+    }
+
+    &[data-popup-open] {
+      z-index: 0;
+    }
+
+    &[data-highlighted]:before, &[data-popup-open]:before {
+      content: "";
+      z-index: -1;
+      inset-block: 0;
+      inset-inline: var(--context-menu-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
+      border-radius: var(--context-menu-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
+      position: absolute;
+    }
+
+    &[data-highlighted]:before {
+      background-color: var(--context-menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-popup-open]:before {
+      background-color: var(--context-menu-submenu-open-bg, var(--color-accent));
+    }
+
+    &[data-highlighted][data-popup-open]:before {
+      background-color: var(--context-menu-highlight-bg, var(--color-foreground));
+    }
+
+    &[data-disabled] {
+      color: var(--context-menu-item-disabled-color, var(--color-muted-foreground));
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  ._di0eq_item, ._di0eq_linkItem {
+    align-items: center;
+    gap: var(--context-menu-item-gap, var(--spacing-2));
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--context-menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: flex;
+  }
+
+  ._di0eq_submenuTrigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--context-menu-submenu-trigger-gap, var(--spacing-3));
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--context-menu-submenu-trigger-padding-x-end, 1rem);
+    display: flex;
+  }
+
+  ._di0eq_submenuTriggerIcon {
+    box-sizing: border-box;
+    width: var(--context-menu-submenu-icon-size, .875rem);
+    height: var(--context-menu-submenu-icon-size, .875rem);
+    color: currentColor;
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  ._di0eq_group {
+    padding-block: var(--context-menu-group-padding-y, 0);
+    display: grid;
+  }
+
+  ._di0eq_groupLabel {
+    padding-block: var(--context-menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
+    padding-inline: var(--context-menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
+      var(--context-menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
+    color: var(--context-menu-group-label-color, var(--color-muted-foreground));
+    font-size: var(--context-menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    line-height: var(--context-menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    user-select: none;
+    cursor: default;
+    margin: 0;
+  }
+
+  ._di0eq_radioGroup {
+    display: grid;
+  }
+
+  ._di0eq_radioItem, ._di0eq_checkboxItem {
+    align-items: center;
+    gap: var(--context-menu-check-gap, var(--popup-check-gap, .5rem));
+    grid-template-columns: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+      minmax(0, 1fr);
+    padding-block: var(--context-menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--context-menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
+      var(--context-menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: grid;
+
+    &[data-indicator-position="end"] {
+      grid-template-columns: minmax(0, 1fr)
+        var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+
+      & > ._di0eq_radioItemIndicator, & > ._di0eq_checkboxItemIndicator {
+        grid-column-start: 2;
+        justify-self: end;
+      }
+
+      & > ._di0eq_itemText {
+        grid-column-start: 1;
+      }
+    }
+  }
+
+  ._di0eq_radioItemIndicator, ._di0eq_checkboxItemIndicator {
+    box-sizing: border-box;
+    width: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    height: var(--context-menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    padding: var(--context-menu-check-indicator-padding, 0);
+    border: var(--context-menu-check-indicator-border-width, var(--border-width-sm)) solid
+      var(--context-menu-check-indicator-border-color, transparent);
+    border-radius: var(--context-menu-check-indicator-radius, var(--radius-xs));
+    background-color: var(--context-menu-check-indicator-bg, transparent);
+    color: var(--context-menu-check-indicator-color, currentColor);
+    flex-shrink: 0;
+    grid-column: 1;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemIndicatorIcon {
+    width: var(--context-menu-check-icon-size, 100%);
+    height: var(--context-menu-check-icon-size, 100%);
+  }
+
+  ._di0eq_itemText {
+    grid-column: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  ._di0eq_itemTextContent {
+    align-items: center;
+    gap: var(--context-menu-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemTextIcon {
+    width: var(--context-menu-item-text-icon-size, 1rem);
+    height: var(--context-menu-item-text-icon-size, 1rem);
+    color: var(--context-menu-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._di0eq_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  ._di0eq_itemShortcut {
+    color: var(--context-menu-item-shortcut-color, var(--color-muted-foreground));
+    font-size: var(--context-menu-item-shortcut-font-size, var(--text-xs));
+    line-height: var(--context-menu-item-shortcut-line-height, var(--line-height-text-xs));
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--context-menu-item-shortcut-padding-x-start, var(--spacing-4));
+  }
+
+  ._di0eq_separator {
+    box-sizing: border-box;
+    height: var(--border-width-sm);
+    margin-block: var(--context-menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
+    margin-inline: var(--context-menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
+      var(--context-menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
+    background-color: var(--context-menu-separator-color, var(--color-border));
+  }
+}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,41 +1,134 @@
-import { ComponentProps } from 'react';
-import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
-export type ContextMenuPositionerProps = Pick<ContextMenuPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding'>;
-export type ContextMenuContentProps = ContextMenuPrimitive.Popup.Props & ContextMenuPositionerProps & {
-    showArrow?: boolean;
+import { ComponentProps } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+
+//#region src/components/ContextMenu/ContextMenu.d.ts
+type ContextMenuPositionerProps = Pick<ContextMenu.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding'>;
+type ContextMenuContentProps = ContextMenu.Popup.Props & ContextMenuPositionerProps & {
+  showArrow?: boolean;
 };
-declare const ContextMenu: typeof ContextMenuPrimitive.Root;
-declare const ContextMenuSubmenu: typeof ContextMenuPrimitive.SubmenuRoot;
-export type ContextMenuIndicatorPosition = 'start' | 'end';
-export type ContextMenuRadioItemProps = ContextMenuPrimitive.RadioItem.Props & {
-    indicator?: ContextMenuIndicatorPosition;
+declare const ContextMenu$1: typeof ContextMenu.Root;
+declare const ContextMenuSubmenu: typeof ContextMenu.SubmenuRoot;
+type ContextMenuIndicatorPosition = 'start' | 'end';
+type ContextMenuRadioItemProps = ContextMenu.RadioItem.Props & {
+  indicator?: ContextMenuIndicatorPosition;
 };
-export type ContextMenuCheckboxItemProps = ContextMenuPrimitive.CheckboxItem.Props & {
-    indicator?: ContextMenuIndicatorPosition;
+type ContextMenuCheckboxItemProps = ContextMenu.CheckboxItem.Props & {
+  indicator?: ContextMenuIndicatorPosition;
 };
-declare function ContextMenuTrigger({ className, render, ...props }: ContextMenuPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function ContextMenuPortal(props: ContextMenuPrimitive.Portal.Props): import("react").JSX.Element;
-declare function ContextMenuBackdrop({ className, ...props }: ContextMenuPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function ContextMenuPositioner({ className, ...props }: ContextMenuPrimitive.Positioner.Props): import("react").JSX.Element;
-declare function ContextMenuPopup({ className, ...props }: ContextMenuPrimitive.Popup.Props): import("react").JSX.Element;
-declare function ContextMenuArrow({ className, children, ...props }: ContextMenuPrimitive.Arrow.Props): import("react").JSX.Element;
-declare function ContextMenuContent({ className, showArrow, children, sideOffset, side, align, alignOffset, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-declare function ContextMenuSubmenuContent({ sideOffset, alignOffset, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-declare function ContextMenuItem({ className, ...props }: ContextMenuPrimitive.Item.Props): import("react").JSX.Element;
-declare function ContextMenuLinkItem({ className, ...props }: ContextMenuPrimitive.LinkItem.Props): import("react").JSX.Element;
-declare function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props): import("react").JSX.Element;
-declare function ContextMenuGroup({ className, ...props }: ContextMenuPrimitive.Group.Props): import("react").JSX.Element;
-declare function ContextMenuGroupLabel({ className, ...props }: ContextMenuPrimitive.GroupLabel.Props): import("react").JSX.Element;
-declare function ContextMenuSubmenuTrigger({ className, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props): import("react").JSX.Element;
-declare function ContextMenuSubmenuTriggerIcon({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ContextMenuRadioGroup({ className, ...props }: ContextMenuPrimitive.RadioGroup.Props): import("react").JSX.Element;
-declare function ContextMenuRadioItem({ className, indicator, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
-declare function ContextMenuRadioItemIndicator({ className, children, ...props }: ContextMenuPrimitive.RadioItemIndicator.Props): import("react").JSX.Element;
-declare function ContextMenuCheckboxItem({ className, indicator, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
-declare function ContextMenuCheckboxItemIndicator({ className, children, ...props }: ContextMenuPrimitive.CheckboxItemIndicator.Props): import("react").JSX.Element;
-declare function ContextMenuItemText({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ContextMenuItemTextContent({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ContextMenuItemTextIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ContextMenuItemTextLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function ContextMenuItemShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { ContextMenu, ContextMenuSubmenu, ContextMenuTrigger, ContextMenuPortal, ContextMenuBackdrop, ContextMenuPositioner, ContextMenuPopup, ContextMenuArrow, ContextMenuContent, ContextMenuSubmenuContent, ContextMenuItem, ContextMenuLinkItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerIcon, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuItemText, ContextMenuItemTextContent, ContextMenuItemTextIcon, ContextMenuItemTextLabel, ContextMenuItemShortcut, };
+declare function ContextMenuTrigger({
+  className,
+  render,
+  ...props
+}: ContextMenu.Trigger.Props): import("react").JSX.Element;
+declare function ContextMenuPortal(props: ContextMenu.Portal.Props): import("react").JSX.Element;
+declare function ContextMenuBackdrop({
+  className,
+  ...props
+}: ContextMenu.Backdrop.Props): import("react").JSX.Element;
+declare function ContextMenuPositioner({
+  className,
+  ...props
+}: ContextMenu.Positioner.Props): import("react").JSX.Element;
+declare function ContextMenuPopup({
+  className,
+  ...props
+}: ContextMenu.Popup.Props): import("react").JSX.Element;
+declare function ContextMenuArrow({
+  className,
+  children,
+  ...props
+}: ContextMenu.Arrow.Props): import("react").JSX.Element;
+declare function ContextMenuContent({
+  className,
+  showArrow,
+  children,
+  sideOffset,
+  side,
+  align,
+  alignOffset,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  ...props
+}: ContextMenuContentProps): import("react").JSX.Element;
+declare function ContextMenuSubmenuContent({
+  sideOffset,
+  alignOffset,
+  ...props
+}: ContextMenuContentProps): import("react").JSX.Element;
+declare function ContextMenuItem({
+  className,
+  ...props
+}: ContextMenu.Item.Props): import("react").JSX.Element;
+declare function ContextMenuLinkItem({
+  className,
+  ...props
+}: ContextMenu.LinkItem.Props): import("react").JSX.Element;
+declare function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenu.Separator.Props): import("react").JSX.Element;
+declare function ContextMenuGroup({
+  className,
+  ...props
+}: ContextMenu.Group.Props): import("react").JSX.Element;
+declare function ContextMenuGroupLabel({
+  className,
+  ...props
+}: ContextMenu.GroupLabel.Props): import("react").JSX.Element;
+declare function ContextMenuSubmenuTrigger({
+  className,
+  ...props
+}: ContextMenu.SubmenuTrigger.Props): import("react").JSX.Element;
+declare function ContextMenuSubmenuTriggerIcon({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuRadioGroup({
+  className,
+  ...props
+}: ContextMenu.RadioGroup.Props): import("react").JSX.Element;
+declare function ContextMenuRadioItem({
+  className,
+  indicator,
+  ...props
+}: ContextMenuRadioItemProps): import("react").JSX.Element;
+declare function ContextMenuRadioItemIndicator({
+  className,
+  children,
+  ...props
+}: ContextMenu.RadioItemIndicator.Props): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({
+  className,
+  indicator,
+  ...props
+}: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+declare function ContextMenuCheckboxItemIndicator({
+  className,
+  children,
+  ...props
+}: ContextMenu.CheckboxItemIndicator.Props): import("react").JSX.Element;
+declare function ContextMenuItemText({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuItemTextContent({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuItemTextIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuItemTextLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ContextMenuItemShortcut({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuArrow, ContextMenuBackdrop, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuIndicatorPosition, ContextMenuItem, ContextMenuItemShortcut, ContextMenuItemText, ContextMenuItemTextContent, ContextMenuItemTextIcon, ContextMenuItemTextLabel, ContextMenuLinkItem, ContextMenuPopup, ContextMenuPortal, ContextMenuPositioner, ContextMenuPositionerProps, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSubmenu, ContextMenuSubmenuContent, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerIcon, ContextMenuTrigger };