npm - @likec4/diagram - Versions diffs - 1.24.1 → 1.25.0 - Mend

@@ -1,8 +1,7 @@
-/* empty css                                  */
 /* empty css                                        */
 /* empty css                        */
 var edgeContainer = "nrg7w92 nrg7w91";
-var edgePathBg = "nrg7w93 _2h8g8h4 _2h8g8h5";
+var edgePathBg = "nrg7w93";
 var markerContext = "nrg7w94";
 var cssEdgePath = "nrg7w96";
 export {

@@ -1,4 +1,3 @@
-/* empty css                                  */
 /* empty css                                        */
 /* empty css                                        */
 var container = "_14fvrz60";

@@ -1,11 +1,8 @@
-/* empty css                                  */
 /* empty css                                        */
 /* empty css                                        */
 var container = "_1jvuy7m0";
-var actionIconWrapper = "_1jvuy7m1";
 var actionIcon = "_1jvuy7m2";
 export {
   actionIcon,
-  actionIconWrapper,
   container
 };

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { actionIcon, actionIconWrapper, container } from "./ElementDetailsButton.css.js";
+import { actionIcon, container } from "./ElementDetailsButton.css.js";
 function ElementDetailsButton({
   selected = false,
   data: {
@@ -15,10 +15,10 @@ function ElementDetailsButton({
   onClick
 }) {
   return /* @__PURE__ */ jsx(Box, { className: clsx(container, hiddenIfZoomTooSmall, "details-button"), children: /* @__PURE__ */ jsx(
-    Box,
+    ActionIcon,
     {
-      className: clsx("nodrag nopan", actionIconWrapper),
-      component: m.div,
+      className: clsx("nodrag nopan", actionIcon),
+      component: m.button,
       initial: false,
       style: {
         originX: 0.45,
@@ -36,17 +36,11 @@ function ElementDetailsButton({
         opacity: 1
       },
       whileTap: { scale: 1.15 },
-      children: /* @__PURE__ */ jsx(
-        ActionIcon,
-        {
-          className: actionIcon,
-          size: "md",
-          radius: "md",
-          onClick,
-          onDoubleClick: stopPropagation,
-          children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
-        }
-      )
+      size: "md",
+      radius: "md",
+      onClick,
+      onDoubleClick: stopPropagation,
+      children: icon ?? /* @__PURE__ */ jsx(IconId, { stroke: 1.8, style: { width: "75%" } })
     }
   ) });
 }

@@ -1,5 +1,4 @@
-/* empty css                                  */
-/* empty css                                        */
+import "./vars.css.ts.vanilla.css.js";
 /* empty css                                        */
 var container = "_1smoows1";
 export {

@@ -4,7 +4,6 @@ import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
-import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { container } from "./ElementNodeContainer.css.js";
 function nodeSizes({
   size,
@@ -43,7 +42,6 @@ const ElementNodeContainer = createPolymorphicComponent(
     children,
     ...rest
   }, ref) => {
-    const nonReducedGraphics = !useIsReducedGraphics();
     let scale = 1;
     switch (true) {
       case isHovered:
@@ -68,7 +66,7 @@ const ElementNodeContainer = createPolymorphicComponent(
           "likec4-element-node"
         ]),
         initial: false,
-        ...selectable && nonReducedGraphics && {
+        ...selectable && {
           animate: {
             scale
           },

@@ -1,4 +1,6 @@
+import { iconSize, paddingSize, textSize } from './vars.css';
 export declare const hasIcon: string;
+export { iconSize, paddingSize, textSize };
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;

@@ -1,9 +1,6 @@
-/* empty css                                  */
-/* empty css                                        */
-/* empty css                                        */
-/* empty css                          */
 /* empty css                                */
 var hasIcon = "fo05290";
+var iconSize = "var(--likec4-icon-size)";
 var title = "fo05292";
 var description = "fo05293";
 var technology = "fo05294";
@@ -16,6 +13,7 @@ export {
   elementIcon,
   elementTextData,
   hasIcon,
+  iconSize,
   technology,
   title
 };

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { Box, Text } from "@mantine/core";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
+import { getVarName } from "../../../utils/css.js";
 import { nodeSizes } from "./ElementNodeContainer.js";
-import { elementIcon, title, technology, description, elementTextData, elementDataContainer, hasIcon } from "./ElementTitle.css.js";
-import { iconSize } from "./styles.css.js";
-function ElementTitle({ id, data, iconSize: iconSize$1 }) {
+import { title, technology, description, elementTextData, elementDataContainer, hasIcon, elementIcon, iconSize } from "./ElementTitle.css.js";
+const varIconSize = getVarName(iconSize);
+function ElementTitle({ id, data, iconSize: iconSize2 }) {
   const elementIcon$1 = IconRenderer({
     element: {
       id,
@@ -30,9 +30,9 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
         "likec4-element"
       ),
       style: {
-        ...isNumber(iconSize$1) && assignInlineVars({
-          [iconSize]: `${iconSize$1}px`
-        })
+        ...isNumber(iconSize2) && {
+          [varIconSize]: `${iconSize2}px`
+        }
       },
       children: [
         elementIcon$1,

@@ -1,2 +1,3 @@
 export declare const root: string;
+export declare const placeholder: string;
 export declare const shortcut: string;

@@ -1,9 +1,9 @@
-/* empty css                            */
-/* empty css                                  */
 /* empty css                                 */
 var root = "xmhqho2";
-var shortcut = "xmhqho3";
+var placeholder = "xmhqho3";
+var shortcut = "xmhqho4";
 export {
+  placeholder,
   root,
   shortcut
 };

@@ -3,13 +3,13 @@ import { UnstyledButton, Group, rem, Text } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
 import { isMacOs } from "@xyflow/system";
 import clsx from "clsx";
-import { shortcut, root } from "./SearchControl.css.js";
+import { placeholder, shortcut, root } from "./SearchControl.css.js";
 function SearchControl({ className, ...others }) {
   const isMac = isMacOs();
   return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
     /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
-    /* @__PURE__ */ jsx(Text, { fz: "sm", fw: "500", pr: 50, children: "Search" }),
-    /* @__PURE__ */ jsx(Text, { fw: 700, className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
   ] }) });
 }
 export {

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type ControlsCustomLayoutProps = {
+    burgerMenu: ReactNode;
+    navigationButtons: ReactNode;
+    search: ReactNode;
+    actionsGroup: ReactNode;
+    syncInProgressBadge: ReactNode;
+};
+export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode;
+export declare const ControlsCustomLayoutProvider: ({ children, value }: {
+    value: ControlsCustomLayout | null;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useControlsCustomLayout: () => ControlsCustomLayout | null;

@@ -0,0 +1,10 @@
+import { createOptionalContext } from "@mantine/core";
+import "react";
+const [
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout
+] = createOptionalContext(null);
+export {
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout
+};

@@ -1,6 +1,7 @@
 import { PropsWithChildren, RefObject } from 'react';
-export declare function RootContainer({ className, children, }: PropsWithChildren<{
+export declare function RootContainer({ className, reduceGraphics, children, }: PropsWithChildren<{
     className?: string | undefined;
+    reduceGraphics?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;
 export declare function useRootContainerRef(): RefObject<HTMLDivElement | null>;
 /**

@@ -2,15 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
 import clsx from "clsx";
 import { useRef, createContext, createRef, useContext } from "react";
-import { rootClassName } from "../globals.css.js";
-import { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
+import { rootClassName } from "../theme-vars.js";
 const RootContainerContext = createContext(createRef());
 function RootContainer({
   className,
+  reduceGraphics = false,
   children
 }) {
   const ref = useRef(null);
-  const reduceGraphics = useIsReducedGraphics();
   return /* @__PURE__ */ jsx(
     Box,
     {

@likec4/diagram 1.24.1 → 1.25.0