@cloudvoyant/helix-react 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +60 -0
- package/dist/index.d.cts +15 -2
- package/dist/index.d.ts +15 -2
- package/dist/index.js +67 -0
- package/package.json +10 -3
package/dist/index.cjs
CHANGED
|
@@ -82,6 +82,7 @@ __export(index_exports, {
|
|
|
82
82
|
HStack: () => HStack,
|
|
83
83
|
Input: () => Input2,
|
|
84
84
|
Item: () => Item,
|
|
85
|
+
Mermaid: () => Mermaid,
|
|
85
86
|
Navbar: () => Navbar,
|
|
86
87
|
NavbarActions: () => NavbarActions,
|
|
87
88
|
NavbarActivationArea: () => NavbarActivationArea,
|
|
@@ -1999,6 +2000,64 @@ function TagInputClearTrigger({ className, ...props }) {
|
|
|
1999
2000
|
}
|
|
2000
2001
|
var TagInputContext = import_tags_input.TagsInputContext;
|
|
2001
2002
|
var useTagInput = import_tags_input.useTagsInputContext;
|
|
2003
|
+
|
|
2004
|
+
// src/mermaid.tsx
|
|
2005
|
+
var import_react7 = require("react");
|
|
2006
|
+
var import_factory35 = require("@ark-ui/react/factory");
|
|
2007
|
+
var import_helix59 = require("@cloudvoyant/helix");
|
|
2008
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
2009
|
+
function Mermaid({ code, svg, className, ...props }) {
|
|
2010
|
+
const [status, setStatus] = (0, import_react7.useState)(svg !== void 0 ? "done" : "loading");
|
|
2011
|
+
const [rendered, setRendered] = (0, import_react7.useState)(svg ?? null);
|
|
2012
|
+
const aspectRatio = rendered !== null ? (0, import_helix59.mermaidSvgAspectRatio)(rendered) : void 0;
|
|
2013
|
+
(0, import_react7.useEffect)(() => {
|
|
2014
|
+
if (svg !== void 0) return;
|
|
2015
|
+
let cancelled = false;
|
|
2016
|
+
setStatus("loading");
|
|
2017
|
+
setRendered(null);
|
|
2018
|
+
(0, import_helix59.renderMermaidSource)(code).then((markup) => {
|
|
2019
|
+
if (!cancelled) {
|
|
2020
|
+
setRendered(markup);
|
|
2021
|
+
setStatus("done");
|
|
2022
|
+
}
|
|
2023
|
+
}).catch(() => {
|
|
2024
|
+
if (!cancelled) setStatus("error");
|
|
2025
|
+
});
|
|
2026
|
+
return () => {
|
|
2027
|
+
cancelled = true;
|
|
2028
|
+
};
|
|
2029
|
+
}, [code, svg]);
|
|
2030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
2031
|
+
import_factory35.ark.div,
|
|
2032
|
+
{
|
|
2033
|
+
...props,
|
|
2034
|
+
"data-mermaid-code": JSON.stringify(code),
|
|
2035
|
+
"data-mermaid-src": rendered !== null ? code : void 0,
|
|
2036
|
+
"data-mermaid-state": status,
|
|
2037
|
+
style: aspectRatio !== void 0 ? { ...props.style, aspectRatio } : props.style,
|
|
2038
|
+
className: (0, import_helix59.cn)(import_helix59.mermaidRootBase, className),
|
|
2039
|
+
children: rendered !== null ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: import_helix59.mermaidSvgBase, dangerouslySetInnerHTML: { __html: rendered } }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("pre", { className: import_helix59.mermaidSourceBase, children: code }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
|
|
2040
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
2041
|
+
"div",
|
|
2042
|
+
{
|
|
2043
|
+
className: import_helix59.mermaidLoadingBase,
|
|
2044
|
+
role: "status",
|
|
2045
|
+
"aria-label": "Rendering diagram",
|
|
2046
|
+
"data-mermaid-loading": true,
|
|
2047
|
+
children: [
|
|
2048
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": "true", className: "h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground" }),
|
|
2049
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm text-muted-foreground", children: "Rendering diagram" })
|
|
2050
|
+
]
|
|
2051
|
+
}
|
|
2052
|
+
),
|
|
2053
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("noscript", { children: [
|
|
2054
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: "[data-mermaid-loading]{display:none}" }),
|
|
2055
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("pre", { className: import_helix59.mermaidSourceBase, children: code })
|
|
2056
|
+
] })
|
|
2057
|
+
] })
|
|
2058
|
+
}
|
|
2059
|
+
);
|
|
2060
|
+
}
|
|
2002
2061
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2003
2062
|
0 && (module.exports = {
|
|
2004
2063
|
Badge,
|
|
@@ -2053,6 +2112,7 @@ var useTagInput = import_tags_input.useTagsInputContext;
|
|
|
2053
2112
|
HStack,
|
|
2054
2113
|
Input,
|
|
2055
2114
|
Item,
|
|
2115
|
+
Mermaid,
|
|
2056
2116
|
Navbar,
|
|
2057
2117
|
NavbarActions,
|
|
2058
2118
|
NavbarActivationArea,
|
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
import { HTMLArkProps } from '@ark-ui/react/factory';
|
|
4
|
-
import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, BadgeProps as BadgeProps$1, ItemProps as ItemProps$1, CardProps as CardProps$1, CardCoverProps as CardCoverProps$1, PageVariants, PageGutterVariants, PageGutterContentVariants, sidebarMenuButtonVariants, SidebarContextProps, TabsListVariants, NavbarVariant, NavbarDensity, NavbarMenuVariant, InputProps as InputProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, SelectItemData, ComboboxItemVariants } from '@cloudvoyant/helix';
|
|
4
|
+
import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, BadgeProps as BadgeProps$1, ItemProps as ItemProps$1, CardProps as CardProps$1, CardCoverProps as CardCoverProps$1, PageVariants, PageGutterVariants, PageGutterContentVariants, sidebarMenuButtonVariants, SidebarContextProps, TabsListVariants, NavbarVariant, NavbarDensity, NavbarMenuVariant, InputProps as InputProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, SelectItemData, ComboboxItemVariants, MermaidProps as MermaidProps$1 } from '@cloudvoyant/helix';
|
|
5
5
|
export { NavbarMenuDensity, NavbarMenuVariant, navbarMenuTriggerStyle } from '@cloudvoyant/helix';
|
|
6
6
|
import { ToggleRootProps, ToggleIndicatorProps } from '@ark-ui/react/toggle';
|
|
7
7
|
import { TooltipRootProps, TooltipContentProps, TooltipRootProviderProps, TooltipTriggerProps, TooltipContent as TooltipContent$1 } from '@ark-ui/react/tooltip';
|
|
@@ -464,4 +464,17 @@ declare const useTagInput: () => _ark_ui_react_tags_input.UseTagsInputContext;
|
|
|
464
464
|
|
|
465
465
|
declare function useMediaQuery(query: string): boolean;
|
|
466
466
|
|
|
467
|
-
|
|
467
|
+
type MermaidProps = HTMLArkProps<'div'> & MermaidProps$1;
|
|
468
|
+
/**
|
|
469
|
+
* Mermaid diagram. Two rendering paths:
|
|
470
|
+
*
|
|
471
|
+
* - **Prerendered** (`svg` prop): the SVG markup is rendered immediately — the server/static
|
|
472
|
+
* path. `mermaid` is never imported client-side. Its `viewBox` reserves the aspect ratio on
|
|
473
|
+
* the root container, so the diagram paints at its final size with no layout shift.
|
|
474
|
+
* - **Client** (no `svg`): an SSR-safe loading skeleton is shown while `mermaid` is dynamically
|
|
475
|
+
* imported and the diagram renders; the source stays available in a `<noscript>` block for
|
|
476
|
+
* no-JS users and is shown directly if the render fails.
|
|
477
|
+
*/
|
|
478
|
+
declare function Mermaid({ code, svg, className, ...props }: MermaidProps): react.JSX.Element;
|
|
479
|
+
|
|
480
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardCover, type CardCoverProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Center, type CenterProps, Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, type CheckboxProps, Col, type ColProps, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, type ComboboxItemProps, ComboboxItemText, ComboboxList, type ComboboxProps, ComboboxTrigger, Container, type ContainerProps, Dialog, DialogBackdrop, DialogContent, type DialogContentPropsWithPositioner, DialogDescription, DialogDismiss, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogProvider, DialogTitle, DialogTrigger, Field, FieldError, FieldHelper, FieldLabel, type FieldProps, FieldRequiredIndicator, FieldSet, FieldSetError, FieldSetHelper, FieldSetLegend, type FieldSetProps, HStack, type HStackProps, Input, type InputProps, Item, type ItemProps, Mermaid, type MermaidProps, Navbar, NavbarActions, NavbarActivationArea, NavbarBrand, NavbarMenu, NavbarMenuContent, NavbarMenuIndicator, NavbarMenuItem, NavbarMenuLink, NavbarMenuList, NavbarMenuTrigger, NavbarMenuViewport, NavbarMobileMenu, NavbarMobileMenuContent, NavbarMobileMenuTrigger, NavbarMobileOverlay, NavbarProvider, NavbarTrigger, NumberInput, NumberInputControl, NumberInputDecrement, NumberInputIncrement, NumberInputInput, type NumberInputProps, Page, PageContent, PageFooter, PageGutter, type PageGutterProps, type PageProps, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentPropsWithArrow, PopoverDescription, PopoverDismiss, PopoverIndicator, PopoverProvider, PopoverTitle, PopoverTrigger, Row, type RowProps, Scroll, type ScrollProps, Select, SelectClearTrigger, SelectContent, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, type SelectItemProps, SelectItemText, SelectNative, type SelectNativeProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, Header as SidebarHeader, Input$1 as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuLink as SidebarMenuLink, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Stack, type StackProps, Switch, SwitchControl, SwitchLabel, type SwitchProps, SwitchThumb, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagInput, TagInputClearTrigger, TagInputContext, type TagInputContextProps, TagInputControl, TagInputInput, TagInputItem, TagInputItemDeleteTrigger, TagInputItemInput, TagInputItemPreview, TagInputItemText, type TagInputProps, Textarea, type TextareaProps, ToggleButton, ToggleButtonIndicator, type ToggleButtonProps, Tooltip, TooltipContent, type TooltipContentPropsWithArrow, TooltipProvider, TooltipTrigger, VStack, type VStackProps, Window, WindowBody, WindowControl, WindowDismiss, WindowDragTrigger, WindowHeader, type WindowProps, WindowProvider, WindowResizeTrigger, type WindowResizeTriggerProps, WindowStageTrigger, WindowTitle, useCheckbox, useCombobox, useField, useMediaQuery, useNavbar, useNumberInput, useSelect, useSidebar, useSwitch, useTabs, useTagInput };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
import { HTMLArkProps } from '@ark-ui/react/factory';
|
|
4
|
-
import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, BadgeProps as BadgeProps$1, ItemProps as ItemProps$1, CardProps as CardProps$1, CardCoverProps as CardCoverProps$1, PageVariants, PageGutterVariants, PageGutterContentVariants, sidebarMenuButtonVariants, SidebarContextProps, TabsListVariants, NavbarVariant, NavbarDensity, NavbarMenuVariant, InputProps as InputProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, SelectItemData, ComboboxItemVariants } from '@cloudvoyant/helix';
|
|
4
|
+
import { ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, BadgeProps as BadgeProps$1, ItemProps as ItemProps$1, CardProps as CardProps$1, CardCoverProps as CardCoverProps$1, PageVariants, PageGutterVariants, PageGutterContentVariants, sidebarMenuButtonVariants, SidebarContextProps, TabsListVariants, NavbarVariant, NavbarDensity, NavbarMenuVariant, InputProps as InputProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, SelectItemData, ComboboxItemVariants, MermaidProps as MermaidProps$1 } from '@cloudvoyant/helix';
|
|
5
5
|
export { NavbarMenuDensity, NavbarMenuVariant, navbarMenuTriggerStyle } from '@cloudvoyant/helix';
|
|
6
6
|
import { ToggleRootProps, ToggleIndicatorProps } from '@ark-ui/react/toggle';
|
|
7
7
|
import { TooltipRootProps, TooltipContentProps, TooltipRootProviderProps, TooltipTriggerProps, TooltipContent as TooltipContent$1 } from '@ark-ui/react/tooltip';
|
|
@@ -464,4 +464,17 @@ declare const useTagInput: () => _ark_ui_react_tags_input.UseTagsInputContext;
|
|
|
464
464
|
|
|
465
465
|
declare function useMediaQuery(query: string): boolean;
|
|
466
466
|
|
|
467
|
-
|
|
467
|
+
type MermaidProps = HTMLArkProps<'div'> & MermaidProps$1;
|
|
468
|
+
/**
|
|
469
|
+
* Mermaid diagram. Two rendering paths:
|
|
470
|
+
*
|
|
471
|
+
* - **Prerendered** (`svg` prop): the SVG markup is rendered immediately — the server/static
|
|
472
|
+
* path. `mermaid` is never imported client-side. Its `viewBox` reserves the aspect ratio on
|
|
473
|
+
* the root container, so the diagram paints at its final size with no layout shift.
|
|
474
|
+
* - **Client** (no `svg`): an SSR-safe loading skeleton is shown while `mermaid` is dynamically
|
|
475
|
+
* imported and the diagram renders; the source stays available in a `<noscript>` block for
|
|
476
|
+
* no-JS users and is shown directly if the render fails.
|
|
477
|
+
*/
|
|
478
|
+
declare function Mermaid({ code, svg, className, ...props }: MermaidProps): react.JSX.Element;
|
|
479
|
+
|
|
480
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardBody, type CardBodyProps, CardCover, type CardCoverProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Center, type CenterProps, Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, type CheckboxProps, Col, type ColProps, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, type ComboboxItemProps, ComboboxItemText, ComboboxList, type ComboboxProps, ComboboxTrigger, Container, type ContainerProps, Dialog, DialogBackdrop, DialogContent, type DialogContentPropsWithPositioner, DialogDescription, DialogDismiss, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogProvider, DialogTitle, DialogTrigger, Field, FieldError, FieldHelper, FieldLabel, type FieldProps, FieldRequiredIndicator, FieldSet, FieldSetError, FieldSetHelper, FieldSetLegend, type FieldSetProps, HStack, type HStackProps, Input, type InputProps, Item, type ItemProps, Mermaid, type MermaidProps, Navbar, NavbarActions, NavbarActivationArea, NavbarBrand, NavbarMenu, NavbarMenuContent, NavbarMenuIndicator, NavbarMenuItem, NavbarMenuLink, NavbarMenuList, NavbarMenuTrigger, NavbarMenuViewport, NavbarMobileMenu, NavbarMobileMenuContent, NavbarMobileMenuTrigger, NavbarMobileOverlay, NavbarProvider, NavbarTrigger, NumberInput, NumberInputControl, NumberInputDecrement, NumberInputIncrement, NumberInputInput, type NumberInputProps, Page, PageContent, PageFooter, PageGutter, type PageGutterProps, type PageProps, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentPropsWithArrow, PopoverDescription, PopoverDismiss, PopoverIndicator, PopoverProvider, PopoverTitle, PopoverTrigger, Row, type RowProps, Scroll, type ScrollProps, Select, SelectClearTrigger, SelectContent, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, type SelectItemProps, SelectItemText, SelectNative, type SelectNativeProps, type SelectProps, SelectTrigger, type SelectTriggerProps, SelectValue, Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, Header as SidebarHeader, Input$1 as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuLink as SidebarMenuLink, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, Splitter, SplitterPanel, SplitterResizeTrigger, SplitterResizeTriggerIndicator, Stack, type StackProps, Switch, SwitchControl, SwitchLabel, type SwitchProps, SwitchThumb, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagInput, TagInputClearTrigger, TagInputContext, type TagInputContextProps, TagInputControl, TagInputInput, TagInputItem, TagInputItemDeleteTrigger, TagInputItemInput, TagInputItemPreview, TagInputItemText, type TagInputProps, Textarea, type TextareaProps, ToggleButton, ToggleButtonIndicator, type ToggleButtonProps, Tooltip, TooltipContent, type TooltipContentPropsWithArrow, TooltipProvider, TooltipTrigger, VStack, type VStackProps, Window, WindowBody, WindowControl, WindowDismiss, WindowDragTrigger, WindowHeader, type WindowProps, WindowProvider, WindowResizeTrigger, type WindowResizeTriggerProps, WindowStageTrigger, WindowTitle, useCheckbox, useCombobox, useField, useMediaQuery, useNavbar, useNumberInput, useSelect, useSidebar, useSwitch, useTabs, useTagInput };
|
package/dist/index.js
CHANGED
|
@@ -2110,6 +2110,72 @@ function TagInputClearTrigger({ className, ...props }) {
|
|
|
2110
2110
|
}
|
|
2111
2111
|
var TagInputContext = ArkTagsInputContext;
|
|
2112
2112
|
var useTagInput = useTagsInputContext;
|
|
2113
|
+
|
|
2114
|
+
// src/mermaid.tsx
|
|
2115
|
+
import { useEffect as useEffect3, useState as useState3 } from "react";
|
|
2116
|
+
import { ark as ark35 } from "@ark-ui/react/factory";
|
|
2117
|
+
import {
|
|
2118
|
+
mermaidRootBase,
|
|
2119
|
+
mermaidSourceBase,
|
|
2120
|
+
mermaidSvgBase,
|
|
2121
|
+
mermaidLoadingBase,
|
|
2122
|
+
renderMermaidSource,
|
|
2123
|
+
mermaidSvgAspectRatio,
|
|
2124
|
+
cn as cn58
|
|
2125
|
+
} from "@cloudvoyant/helix";
|
|
2126
|
+
import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2127
|
+
function Mermaid({ code, svg, className, ...props }) {
|
|
2128
|
+
const [status, setStatus] = useState3(svg !== void 0 ? "done" : "loading");
|
|
2129
|
+
const [rendered, setRendered] = useState3(svg ?? null);
|
|
2130
|
+
const aspectRatio = rendered !== null ? mermaidSvgAspectRatio(rendered) : void 0;
|
|
2131
|
+
useEffect3(() => {
|
|
2132
|
+
if (svg !== void 0) return;
|
|
2133
|
+
let cancelled = false;
|
|
2134
|
+
setStatus("loading");
|
|
2135
|
+
setRendered(null);
|
|
2136
|
+
renderMermaidSource(code).then((markup) => {
|
|
2137
|
+
if (!cancelled) {
|
|
2138
|
+
setRendered(markup);
|
|
2139
|
+
setStatus("done");
|
|
2140
|
+
}
|
|
2141
|
+
}).catch(() => {
|
|
2142
|
+
if (!cancelled) setStatus("error");
|
|
2143
|
+
});
|
|
2144
|
+
return () => {
|
|
2145
|
+
cancelled = true;
|
|
2146
|
+
};
|
|
2147
|
+
}, [code, svg]);
|
|
2148
|
+
return /* @__PURE__ */ jsx58(
|
|
2149
|
+
ark35.div,
|
|
2150
|
+
{
|
|
2151
|
+
...props,
|
|
2152
|
+
"data-mermaid-code": JSON.stringify(code),
|
|
2153
|
+
"data-mermaid-src": rendered !== null ? code : void 0,
|
|
2154
|
+
"data-mermaid-state": status,
|
|
2155
|
+
style: aspectRatio !== void 0 ? { ...props.style, aspectRatio } : props.style,
|
|
2156
|
+
className: cn58(mermaidRootBase, className),
|
|
2157
|
+
children: rendered !== null ? /* @__PURE__ */ jsx58("div", { className: mermaidSvgBase, dangerouslySetInnerHTML: { __html: rendered } }) : status === "error" ? /* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
|
|
2158
|
+
/* @__PURE__ */ jsxs17(
|
|
2159
|
+
"div",
|
|
2160
|
+
{
|
|
2161
|
+
className: mermaidLoadingBase,
|
|
2162
|
+
role: "status",
|
|
2163
|
+
"aria-label": "Rendering diagram",
|
|
2164
|
+
"data-mermaid-loading": true,
|
|
2165
|
+
children: [
|
|
2166
|
+
/* @__PURE__ */ jsx58("span", { "aria-hidden": "true", className: "h-5 w-5 shrink-0 animate-spin rounded-full border-2 border-muted-foreground/25 border-t-muted-foreground" }),
|
|
2167
|
+
/* @__PURE__ */ jsx58("span", { className: "text-sm text-muted-foreground", children: "Rendering diagram" })
|
|
2168
|
+
]
|
|
2169
|
+
}
|
|
2170
|
+
),
|
|
2171
|
+
/* @__PURE__ */ jsxs17("noscript", { children: [
|
|
2172
|
+
/* @__PURE__ */ jsx58("style", { children: "[data-mermaid-loading]{display:none}" }),
|
|
2173
|
+
/* @__PURE__ */ jsx58("pre", { className: mermaidSourceBase, children: code })
|
|
2174
|
+
] })
|
|
2175
|
+
] })
|
|
2176
|
+
}
|
|
2177
|
+
);
|
|
2178
|
+
}
|
|
2113
2179
|
export {
|
|
2114
2180
|
Badge,
|
|
2115
2181
|
Button,
|
|
@@ -2163,6 +2229,7 @@ export {
|
|
|
2163
2229
|
HStack,
|
|
2164
2230
|
Input2 as Input,
|
|
2165
2231
|
Item,
|
|
2232
|
+
Mermaid,
|
|
2166
2233
|
Navbar,
|
|
2167
2234
|
NavbarActions,
|
|
2168
2235
|
NavbarActivationArea,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudvoyant/helix-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "helix React UI components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -23,16 +23,23 @@
|
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "^19.2.8",
|
|
26
|
-
"react-dom": "^19.2.8"
|
|
26
|
+
"react-dom": "^19.2.8",
|
|
27
|
+
"mermaid": "^11.16.0"
|
|
28
|
+
},
|
|
29
|
+
"peerDependenciesMeta": {
|
|
30
|
+
"mermaid": {
|
|
31
|
+
"optional": true
|
|
32
|
+
}
|
|
27
33
|
},
|
|
28
34
|
"dependencies": {
|
|
29
35
|
"@ark-ui/react": "^5.38.2",
|
|
30
|
-
"@cloudvoyant/helix": "0.
|
|
36
|
+
"@cloudvoyant/helix": "0.16.0"
|
|
31
37
|
},
|
|
32
38
|
"devDependencies": {
|
|
33
39
|
"@types/node": "^22.0.0",
|
|
34
40
|
"@types/react": "^19.2.18",
|
|
35
41
|
"@types/react-dom": "^19.2.4",
|
|
42
|
+
"mermaid": "^11.16.0",
|
|
36
43
|
"react": "^19.2.8",
|
|
37
44
|
"react-dom": "^19.2.8"
|
|
38
45
|
},
|