@luxfi/ui 5.5.3 → 5.6.0

package/dist/menu.cjs

@@ -0,0 +1,305 @@
+"use client";
+'use strict';
+
+var DropdownMenu = require('@radix-ui/react-dropdown-menu');
+var React = require('react');
+var lu = require('react-icons/lu');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function parsePlacement(placement) {
+  if (!placement) {
+    return { side: "bottom", align: "start" };
+  }
+  const parts = placement.split("-");
+  const side = parts[0] ?? "bottom";
+  const alignPart = parts[1];
+  let align = "center";
+  if (alignPart === "start") {
+    align = "start";
+  } else if (alignPart === "end") {
+    align = "end";
+  }
+  return { side, align };
+}
+var PositioningContext = React__namespace.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0
+});
+var MenuRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    modal = true,
+    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
+    // mount/unmount automatically.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit
+  } = props;
+  const mergedPositioning = {
+    placement: "bottom-start",
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset
+    }
+  };
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React__namespace.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React__namespace.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var MenuTrigger = React__namespace.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React__namespace.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React__namespace.useContext(PositioningContext);
+  const mergedStyle = {
+    ...style,
+    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
+    ...minW !== void 0 ? { minWidth: minW } : {}
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Content,
+    {
+      ref,
+      side: positioning.side,
+      align: positioning.align,
+      sideOffset: positioning.sideOffset,
+      alignOffset: positioning.alignOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
+        "border border-[var(--color-popover-border,var(--color-border-divider))]",
+        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
+        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
+        "outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
+      ...rest
+    }
+  );
+  if (!portalled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React__namespace.forwardRef(function MenuItem2(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Item,
+    {
+      ref,
+      asChild,
+      disabled,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "text-[var(--color-text-primary,inherit)]",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var MenuItemText = React__namespace.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+var MenuItemCommand = React__namespace.forwardRef(function MenuItemCommand2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...rest
+    }
+  );
+});
+var MenuSeparator = React__namespace.forwardRef(function MenuSeparator2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
+      ...rest
+    }
+  );
+});
+var MenuItemGroup = React__namespace.forwardRef(function MenuItemGroup2(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { ref, className, ...rest, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
+    children
+  ] });
+});
+var MenuArrow = React__namespace.forwardRef(function MenuArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+var MenuCheckboxItem = React__namespace.forwardRef(function MenuCheckboxItem2(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenu__namespace.CheckboxItem,
+    {
+      ref,
+      checked,
+      onCheckedChange,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var MenuRadioItemGroup = React__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+var MenuRadioItem = React__namespace.forwardRef(function MenuRadioItem2(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  const { value: _v, ...radixRest } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenu__namespace.RadioItem,
+    {
+      ref,
+      value,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCheck, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+});
+var MenuContextTrigger = React__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
+});
+var MenuTriggerItem = React__namespace.forwardRef(function MenuTriggerItem2(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownMenu__namespace.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        className
+      ),
+      ...rest,
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+});
+
+exports.MenuArrow = MenuArrow;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuContent = MenuContent;
+exports.MenuContextTrigger = MenuContextTrigger;
+exports.MenuItem = MenuItem;
+exports.MenuItemCommand = MenuItemCommand;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuItemText = MenuItemText;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuRadioItemGroup = MenuRadioItemGroup;
+exports.MenuRoot = MenuRoot;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuTriggerItem = MenuTriggerItem;

package/dist/menu.js

@@ -0,0 +1,269 @@
+"use client";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { LuCheck, LuChevronRight } from 'react-icons/lu';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function parsePlacement(placement) {
+  if (!placement) {
+    return { side: "bottom", align: "start" };
+  }
+  const parts = placement.split("-");
+  const side = parts[0] ?? "bottom";
+  const alignPart = parts[1];
+  let align = "center";
+  if (alignPart === "start") {
+    align = "start";
+  } else if (alignPart === "end") {
+    align = "end";
+  }
+  return { side, align };
+}
+var PositioningContext = React.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0
+});
+var MenuRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    modal = true,
+    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
+    // mount/unmount automatically.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit
+  } = props;
+  const mergedPositioning = {
+    placement: "bottom-start",
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset
+    }
+  };
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var MenuTrigger = React.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React.useContext(PositioningContext);
+  const mergedStyle = {
+    ...style,
+    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
+    ...minW !== void 0 ? { minWidth: minW } : {}
+  };
+  const content = /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      ref,
+      side: positioning.side,
+      align: positioning.align,
+      sideOffset: positioning.sideOffset,
+      alignOffset: positioning.alignOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
+        "border border-[var(--color-popover-border,var(--color-border-divider))]",
+        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
+        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
+        "outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
+      ...rest
+    }
+  );
+  if (!portalled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React.forwardRef(function MenuItem2(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      ref,
+      asChild,
+      disabled,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "text-[var(--color-text-primary,inherit)]",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var MenuItemText = React.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+var MenuItemCommand = React.forwardRef(function MenuItemCommand2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...rest
+    }
+  );
+});
+var MenuSeparator = React.forwardRef(function MenuSeparator2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
+      ...rest
+    }
+  );
+});
+var MenuItemGroup = React.forwardRef(function MenuItemGroup2(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
+    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
+    children
+  ] });
+});
+var MenuArrow = React.forwardRef(function MenuArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+var MenuCheckboxItem = React.forwardRef(function MenuCheckboxItem2(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.CheckboxItem,
+    {
+      ref,
+      checked,
+      onCheckedChange,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var MenuRadioItemGroup = React.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+var MenuRadioItem = React.forwardRef(function MenuRadioItem2(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  const { value: _v, ...radixRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.RadioItem,
+    {
+      ref,
+      value,
+      onClick,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(LuCheck, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+});
+var MenuContextTrigger = React.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, ...rest });
+});
+var MenuTriggerItem = React.forwardRef(function MenuTriggerItem2(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "outline-none transition-colors",
+        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
+        className
+      ),
+      ...rest,
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+});
+
+export { MenuArrow, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuItem, MenuItemCommand, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem };