@likec4/diagram 1.18.0 → 1.19.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-2024 Denis Davydkov
+Copyright (c) 2023-2025 Denis Davydkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/LikeC4CustomColors.d.ts

@@ -0,0 +1,7 @@
+import { CustomColorDefinitions } from '@likec4/core';
+import { NamedExoticComponent } from 'react';
+interface LikeC4CustomColorsProperties {
+    customColors: CustomColorDefinitions;
+}
+export declare const LikeC4CustomColors: NamedExoticComponent<LikeC4CustomColorsProperties>;
+export {};

package/dist/LikeC4CustomColors.js

@@ -0,0 +1,30 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import "@likec4/core";
+import { useMantineStyleNonce } from "@mantine/core";
+import { deepEqual } from "fast-equals";
+import { memo } from "react";
+import { entries } from "remeda";
+import { vars } from "./theme-vars.css.js";
+function toStyle(name, colorValues) {
+  const rules = [
+    ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
+    ...entries(colorValues.relationships).map(([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`)
+  ].join("\n");
+  return `:where([data-likec4-color=${name}]) {
+  ${rules}
+}`;
+}
+function stripCssVarReference(ref) {
+  const end = ref.indexOf(",");
+  return ref.substring(4, end == -1 ? ref.length - 1 : end);
+}
+const LikeC4CustomColors = memo(({ customColors }) => {
+  var _a;
+  const styles = entries(customColors).map(([name, color]) => toStyle(name, color)).join("\n");
+  const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("style", { type: "text/css", dangerouslySetInnerHTML: { __html: styles }, nonce }) });
+}, deepEqual);
+LikeC4CustomColors.displayName = "LikeC4CustomColors";
+export {
+  LikeC4CustomColors
+};

package/dist/LikeC4Diagram.css.d.ts

@@ -0,0 +1,5 @@
+export declare const cssReactFlow: string;
+export declare const notInitialized: string;
+export declare const cssDisablePan: string;
+export declare const cssTransparentBg: string;
+export declare const cssNoControls: string;

package/dist/LikeC4Diagram.css.js

@@ -0,0 +1,13 @@
+/* empty css                                 */
+var cssReactFlow = "_2h8g8h0";
+var notInitialized = "_2h8g8h1";
+var cssDisablePan = "_2h8g8h2";
+var cssTransparentBg = "_2h8g8h3";
+var cssNoControls = "_2h8g8h4";
+export {
+  cssDisablePan,
+  cssNoControls,
+  cssReactFlow,
+  cssTransparentBg,
+  notInitialized
+};

package/dist/LikeC4Diagram.d.ts

@@ -0,0 +1,6 @@
+import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
+export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
+export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, enableSearch, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LikeC4Diagram {
+    var displayName: string;
+}

package/dist/LikeC4Diagram.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { isDeploymentView } from "@likec4/core";
+import { ReactFlowProvider } from "@xyflow/react";
+import clsx from "clsx";
+import { deepEqual } from "fast-equals";
+import { useRef, useEffect, memo } from "react";
+import { isEmpty } from "remeda";
+import { rootClassName } from "./globals.css.js";
+import { useDiagramState } from "./hooks/useDiagramState.js";
+import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
+import { cssReactFlow, cssNoControls, cssDisablePan, cssTransparentBg, notInitialized } from "./LikeC4Diagram.css.js";
+import { LikeC4Search } from "./LikeC4Search.js";
+import { DiagramContextProvider } from "./state/DiagramContext.js";
+import { EnsureMantine } from "./ui/EnsureMantine.js";
+import { FramerMotionConfig } from "./ui/FramerMotionConfig.js";
+import { FitViewOnDiagramChange } from "./xyflow/FitviewOnDiagramChange.js";
+import { SelectEdgesOnNodeFocus } from "./xyflow/SelectEdgesOnNodeFocus.js";
+import { XYFlow } from "./xyflow/XYFlow.js";
+import { XYFlowInner } from "./xyflow/XYFlowInner.js";
+import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
+import { Overlays } from "./overlays/Overlays.js";
+function LikeC4Diagram({
+  view,
+  className,
+  fitView = true,
+  fitViewPadding = 0,
+  readonly = true,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = !readonly,
+  nodesDraggable = !readonly,
+  background = "dots",
+  controls = !readonly,
+  showDiagramTitle = true,
+  showNotations = true,
+  enableDynamicViewWalkthrough = false,
+  enableFocusMode = false,
+  enableElementDetails = false,
+  enableRelationshipDetails = enableElementDetails,
+  enableRelationshipBrowser = enableRelationshipDetails,
+  enableSearch = true,
+  initialWidth,
+  initialHeight,
+  keepAspectRatio = false,
+  experimentalEdgeEditing = false,
+  onCanvasClick,
+  onCanvasContextMenu,
+  onCanvasDblClick,
+  onEdgeClick,
+  onChange,
+  onEdgeContextMenu,
+  onNavigateTo,
+  onNodeClick,
+  onNodeContextMenu,
+  onOpenSource,
+  onBurgerMenuClick,
+  renderIcon,
+  where,
+  showNavigationButtons = !!onNavigateTo
+}) {
+  const hasLikec4model = !!useLikeC4Model();
+  const initialRef = useRef({
+    defaultNodes: [],
+    defaultEdges: [],
+    initialWidth: initialWidth ?? view.bounds.width,
+    initialHeight: initialHeight ?? view.bounds.height
+  });
+  useEffect(() => {
+    if (readonly !== true && where != null) {
+      console.warn("Ignore filter, supported in readonly mode only\n", { where });
+    }
+    if (hasLikec4model) {
+      return;
+    }
+    if (enableRelationshipDetails) {
+      console.warn("Invalid showRelationshipDetails=true, requires LikeC4ModelProvider");
+    }
+    if (enableElementDetails) {
+      console.warn("Invalid enableElementDetails=true, requires LikeC4ModelProvider");
+    }
+    if (enableRelationshipBrowser) {
+      console.warn("Invalid enableRelationshipBrowser=true, requires LikeC4ModelProvider");
+    }
+  });
+  return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(FramerMotionConfig, { children: /* @__PURE__ */ jsxs(
+    ReactFlowProvider,
+    {
+      fitView,
+      ...initialRef.current,
+      children: [
+        !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
+        /* @__PURE__ */ jsx(
+          DiagramContextProvider,
+          {
+            view,
+            keepAspectRatio,
+            className: clsx(rootClassName, className),
+            readonly,
+            experimentalEdgeEditing: !readonly && experimentalEdgeEditing,
+            pannable,
+            zoomable,
+            nodesDraggable,
+            nodesSelectable: nodesSelectable || enableFocusMode,
+            hasLikeC4Model: hasLikec4model,
+            fitViewEnabled: fitView,
+            fitViewPadding,
+            controls,
+            showNavigationButtons: showNavigationButtons && !!onNavigateTo,
+            showNotations,
+            enableFocusMode,
+            enableSearch: hasLikec4model && enableSearch,
+            enableElementDetails: enableElementDetails && hasLikec4model,
+            enableDynamicViewWalkthrough,
+            enableRelationshipBrowser: enableRelationshipBrowser && hasLikec4model,
+            enableRelationshipDetails: enableRelationshipDetails && hasLikec4model && !isDeploymentView(view),
+            whereFilter: readonly ? where ?? null : null,
+            renderIcon: renderIcon ?? null,
+            onCanvasClick: onCanvasClick ?? null,
+            onCanvasContextMenu: onCanvasContextMenu ?? null,
+            onEdgeClick: onEdgeClick ?? null,
+            onEdgeContextMenu: onEdgeContextMenu ?? null,
+            onNodeClick: onNodeClick ?? null,
+            onNodeContextMenu: onNodeContextMenu ?? null,
+            onChange: onChange ?? null,
+            onNavigateTo: onNavigateTo ?? null,
+            onCanvasDblClick: onCanvasDblClick ?? null,
+            onOpenSource: onOpenSource ?? null,
+            onBurgerMenuClick: onBurgerMenuClick ?? null,
+            children: /* @__PURE__ */ jsx(
+              LikeC4DiagramInnerMemo,
+              {
+                background,
+                showDiagramTitle,
+                enableSearch: hasLikec4model && enableSearch
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+LikeC4Diagram.displayName = "LikeC4Diagram";
+const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo(function LikeC4DiagramInner({
+  background,
+  showDiagramTitle,
+  enableSearch
+}) {
+  const {
+    isInitialized,
+    pannable,
+    fitView,
+    enableFocusMode,
+    enableOverlays
+  } = useDiagramState((s) => ({
+    isInitialized: s.initialized,
+    pannable: s.pannable,
+    fitView: s.fitViewEnabled,
+    enableFocusMode: s.enableFocusMode,
+    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipBrowser || s.enableElementDetails)
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      XYFlow,
+      {
+        className: clsx(
+          "likec4-diagram",
+          cssReactFlow,
+          cssNoControls,
+          pannable !== true && cssDisablePan,
+          background === "transparent" && cssTransparentBg,
+          isInitialized ? "initialized" : notInitialized
+        ),
+        children: /* @__PURE__ */ jsx(
+          XYFlowInner,
+          {
+            showDiagramTitle,
+            background
+          }
+        )
+      }
+    ),
+    enableOverlays && /* @__PURE__ */ jsx(Overlays, {}),
+    enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+    isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
+      fitView && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
+      enableFocusMode && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
+    ] })
+  ] });
+}, deepEqual);
+LikeC4DiagramInnerMemo.displayName = "LikeC4DiagramInnerMemo";
+export {
+  LikeC4Diagram
+};

package/dist/LikeC4Diagram.props.d.ts

@@ -0,0 +1,166 @@
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, ViewChange, ViewId, WhereOperator } from '@likec4/core';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { XYBackground } from './xyflow/XYFlowBackground';
+export type { WhereOperator };
+export type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
+    navigateTo: ID;
+};
+type ElementIconNodeProps = {
+    id: string;
+    title: string;
+    icon?: string | undefined;
+};
+export type ElementIconRenderer = (props: {
+    node: ElementIconNodeProps;
+}) => ReactNode;
+export type OnNavigateTo<ID extends string = ViewId> = (to: ID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<ID>) => void;
+export type OnNodeClick = (node: DiagramNode, event: ReactMouseEvent) => void;
+export type OnEdgeClick = (edge: DiagramEdge, event: ReactMouseEvent) => void;
+/**
+ * On pane/canvas click (not on any node or edge)
+ */
+export type OnCanvasClick = (event: ReactMouseEvent) => void;
+export type ChangeEvent = {
+    change: ViewChange;
+};
+export type OnChange = (event: ChangeEvent) => void;
+export type LikeC4ColorScheme = 'light' | 'dark';
+export interface LikeC4DiagramProperties {
+    view: DiagramView;
+    className?: string | undefined;
+    /**
+     * Enable/disable panning
+     * @default true
+     */
+    pannable?: boolean | undefined;
+    /**
+     * Enable/disable zooming
+     * @default true
+     */
+    zoomable?: boolean | undefined;
+    /**
+     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
+     * @default true
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Show/hide panel with top left controls,
+     *
+     * @default true if not readonly
+     */
+    controls?: boolean | undefined;
+    /**
+     * If set, initial viewport will show all nodes & edges
+     * @default true
+     */
+    fitView?: boolean | undefined;
+    /**
+     * Seems like this is percentage of the view size
+     * @default 0
+     */
+    fitViewPadding?: number | undefined;
+    /**
+     * @default false if readonly
+     */
+    nodesSelectable?: boolean | undefined;
+    /**
+     * @default false if readonly
+     */
+    nodesDraggable?: boolean | undefined;
+    initialWidth?: number | undefined;
+    initialHeight?: number | undefined;
+    /**
+     * Keep aspect ratio of the diagram
+     * @default false
+     */
+    keepAspectRatio?: boolean | undefined;
+    /**
+     * Background pattern
+     * @default 'dots'
+     */
+    background?: 'transparent' | 'solid' | XYBackground | undefined;
+    /**
+     * Display webview with diagram title / description
+     * @default true
+     */
+    showDiagramTitle?: boolean | undefined;
+    /**
+     * Show back/forward history navigation buttons
+     * @default true if `onNavigateTo` is set
+     */
+    showNavigationButtons?: undefined | boolean;
+    /**
+     * Display notations of the view
+     * @default true
+     */
+    showNotations?: boolean | undefined;
+    /**
+     * Display dropdown with details on relationship's label click
+     * @default false
+     */
+    enableRelationshipDetails?: boolean | undefined;
+    /**
+     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
+     * @default false
+     */
+    enableFocusMode?: boolean | undefined;
+    /**
+     * Enable search popup for elements and views
+     * @default true
+     */
+    enableSearch?: boolean | undefined;
+    /**
+     * Enable modal with element details
+     * @default false
+     */
+    enableElementDetails?: boolean | undefined;
+    /**
+     * Experimental feature to browse relationships
+     *
+     * @default false
+     */
+    enableRelationshipBrowser?: boolean | undefined;
+    /**
+     * If Walkthrough for dynamic views should be enabled
+     * @default false
+     */
+    enableDynamicViewWalkthrough?: boolean | undefined;
+    /**
+     * Experimental feature to enable edge editing
+     * @default false
+     */
+    experimentalEdgeEditing?: boolean | undefined;
+    /**
+     * Render icon for an element, bundled or remote
+     * By default, if icon is http:// or https://, it will be rendered as an image
+     */
+    renderIcon?: ElementIconRenderer | undefined;
+    /**
+     * Dynamic filter, applies both to nodes and edges
+     */
+    where?: WhereOperator<string, string> | undefined;
+}
+export type OpenSourceParams = {
+    element: Fqn;
+    property?: string;
+} | {
+    relation: RelationId;
+} | {
+    deployment: Fqn;
+    property?: string;
+} | {
+    view: ViewId;
+};
+export interface LikeC4DiagramEventHandlers {
+    onChange?: OnChange | null | undefined;
+    onNavigateTo?: OnNavigateTo | null | undefined;
+    onNodeClick?: OnNodeClick | null | undefined;
+    onNodeContextMenu?: OnNodeClick | null | undefined;
+    onCanvasContextMenu?: OnCanvasClick | null | undefined;
+    onEdgeClick?: OnEdgeClick | null | undefined;
+    onEdgeContextMenu?: OnEdgeClick | null | undefined;
+    onCanvasClick?: OnCanvasClick | null | undefined;
+    onCanvasDblClick?: OnCanvasClick | null | undefined;
+    onBurgerMenuClick?: null | undefined | (() => void);
+    onOpenSource?: null | undefined | ((params: OpenSourceParams) => void);
+}

package/dist/LikeC4ModelProvider.d.ts

@@ -0,0 +1,9 @@
+import { LikeC4Model } from '@likec4/core';
+import { PropsWithChildren } from 'react';
+export type LikeC4ModelProviderProps = PropsWithChildren<{
+    likec4model: LikeC4Model;
+}>;
+/**
+ * Ensures LikeC4Model context
+ */
+export declare function LikeC4ModelProvider({ children, likec4model }: LikeC4ModelProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4ModelProvider.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { LikeC4ModelContext } from "./likec4model/LikeC4ModelContext.js";
+function LikeC4ModelProvider({
+  children,
+  likec4model
+}) {
+  return /* @__PURE__ */ jsx(LikeC4ModelContext.Provider, { value: likec4model, children });
+}
+export {
+  LikeC4ModelProvider
+};

package/dist/LikeC4Search.css.d.ts

@@ -0,0 +1 @@
+export declare const actionSection: string;

package/dist/LikeC4Search.css.js

@@ -0,0 +1,5 @@
+/* empty css                                */
+var actionSection = "_16mg60z0";
+export {
+  actionSection
+};

package/dist/LikeC4Search.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const LikeC4Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/LikeC4Search.js

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import { rem } from "@mantine/core";
+import { Spotlight } from "@mantine/spotlight";
+import { IconSearch, IconRectangularPrism, IconStack2, IconSitemap } from "@tabler/icons-react";
+import { memo, useMemo } from "react";
+import { pipe, filter, map } from "remeda";
+import { actionSection } from "./LikeC4Search.css.js";
+import { useDiagramState, useDiagramStoreApi } from "./hooks/useDiagramState.js";
+import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
+import { useMantinePortalProps } from "./hooks/useMantinePortalProps.js";
+const LikeC4Search = memo(() => {
+  const view = useDiagramState((s) => s.view);
+  const model = useLikeC4Model(true);
+  const store = useDiagramStoreApi();
+  const getNodeActionsData = () => {
+    const { focusOnNode } = store.getState();
+    return pipe(
+      view.nodes,
+      filter((n) => !!n.title),
+      map((n) => ({
+        id: n.id,
+        label: n.title,
+        ...n.description && {
+          description: n.description
+        },
+        keywords: [
+          n.title,
+          ...(n.tags ?? []).map((t) => `#${t}`),
+          ...n.description ? [n.description] : []
+        ].filter((k) => k.toLowerCase()),
+        onClick: () => focusOnNode(n.id),
+        leftSection: /* @__PURE__ */ jsx(IconRectangularPrism, {})
+      }))
+    );
+  };
+  const getViewActionsData = () => {
+    const views = [...model.views()];
+    return map(views, (v) => ({
+      id: v.id,
+      label: v.title ?? v.id,
+      ...v.$view.description && {
+        description: v.$view.description
+      },
+      keywords: [
+        v.title ?? v.id,
+        ...v.tags ?? [],
+        ...v.$view.description ? [v.$view.description] : []
+      ],
+      onClick: () => {
+        var _a, _b;
+        store.setState({
+          lastOnNavigate: {
+            fromView: view.id,
+            toView: v.id,
+            fromNode: null
+          }
+        });
+        (_b = (_a = store.getState()).onNavigateTo) == null ? void 0 : _b.call(_a, v.id);
+      },
+      leftSection: v.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, {}) : /* @__PURE__ */ jsx(IconSitemap, {})
+    }));
+  };
+  const actions = useMemo(() => [
+    {
+      group: "Elements",
+      actions: getNodeActionsData()
+    },
+    {
+      group: "Views",
+      actions: getViewActionsData()
+    }
+  ], [model, store, view]);
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(
+    Spotlight,
+    {
+      ...portalProps,
+      actions,
+      nothingFound: "Nothing found...",
+      shortcut: ["mod + f", "mod + k"],
+      scrollable: true,
+      highlightQuery: true,
+      maxHeight: 350,
+      classNames: {
+        actionSection
+      },
+      searchProps: {
+        leftSection: /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(18), height: rem(18) }, stroke: 1.5 }),
+        placeholder: "Search elements and views..."
+      }
+    }
+  );
+});
+export {
+  LikeC4Search
+};

package/dist/StaticLikeC4Diagram.d.ts

@@ -0,0 +1,3 @@
+import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
+export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
+export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/StaticLikeC4Diagram.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { LikeC4Diagram } from "./LikeC4Diagram.js";
+function StaticLikeC4Diagram({
+  view,
+  fitView = true,
+  fitViewPadding = 0,
+  enableElementDetails = false,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = enableRelationshipDetails,
+  background = "transparent",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    LikeC4Diagram,
+    {
+      view,
+      readonly: true,
+      fitView,
+      fitViewPadding,
+      pannable: false,
+      zoomable: false,
+      controls: false,
+      background,
+      showDiagramTitle: false,
+      showNotations: false,
+      enableElementDetails,
+      enableRelationshipDetails,
+      enableRelationshipBrowser,
+      enableDynamicViewWalkthrough: false,
+      experimentalEdgeEditing: false,
+      enableFocusMode: false,
+      nodesSelectable: false,
+      nodesDraggable: false,
+      enableSearch: false,
+      ...rest
+    }
+  );
+}
+export {
+  StaticLikeC4Diagram
+};

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};

package/dist/controls/Text.d.ts

@@ -0,0 +1,2 @@
+import { PolymorphicComponentProps, TextProps } from '@mantine/core';
+export declare const Text: <L = "div">(props: PolymorphicComponentProps<L, TextProps>) => React.ReactElement;

package/dist/controls/Text.js

@@ -0,0 +1,7 @@
+import { Text as Text$1 } from "@mantine/core";
+const Text = Text$1.withProps({
+  component: "div"
+});
+export {
+  Text
+};

package/dist/controls/action-button-bar/ActionButtonBar.css.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/dist/controls/action-button-bar/ActionButtonBar.css.js

@@ -0,0 +1,5 @@
+/* empty css                                   */
+var container = "_10w34w70";
+export {
+  container
+};

package/dist/controls/action-button-bar/ActionButtonBar.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type ShiftX = 'left' | 'spread' | 'right';
+type ShiftY = 'top' | 'spread' | 'bottom';
+type ActionButtonBarProps = PropsWithChildren<{
+    shiftX?: ShiftX;
+    shiftY?: ShiftY;
+}>;
+export declare const ActionButtonBar: ({ shiftX, shiftY, children, }: ActionButtonBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};