@geckoui/geckoui 1.2.0-beta.0 → 1.2.0-beta.1
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.d.mts +2 -263
- package/dist/index.d.ts +2 -263
- package/dist/index.js +442 -644
- package/dist/index.mjs +313 -515
- package/package.json +6 -19
- package/dist/components/Markdown/Markdown.css +0 -138
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { RefObject,
|
|
3
|
-
import * as unified from 'unified';
|
|
4
|
-
import * as hast from 'hast';
|
|
5
|
-
import * as mdast from 'mdast';
|
|
2
|
+
import react__default, { RefObject, InputHTMLAttributes, FC, ReactNode, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor, SVGProps } from 'react';
|
|
6
3
|
import { ControllerProps, Control, FieldValues, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
|
|
7
4
|
import { Placement, Strategy, useFloating } from '@floating-ui/react';
|
|
8
5
|
import { TextareaAutosizeProps } from 'react-textarea-autosize';
|
|
@@ -11,7 +8,6 @@ import { SwitchProps as SwitchProps$1, MenuItemsProps as MenuItemsProps$1, MenuB
|
|
|
11
8
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
12
9
|
import { ToasterProps } from 'sonner';
|
|
13
10
|
export { toast } from 'sonner';
|
|
14
|
-
import { MermaidConfig } from 'mermaid';
|
|
15
11
|
|
|
16
12
|
/**
|
|
17
13
|
* Reuseable hook to detect clicks outside of a ref element that is passed as an argument
|
|
@@ -242,93 +238,6 @@ declare const usePreventDefault: () => {
|
|
|
242
238
|
* */
|
|
243
239
|
declare const useEscListener: (callback?: () => void) => void;
|
|
244
240
|
|
|
245
|
-
type MermaidDiagramBaseProps = Omit<SVGProps<SVGSVGElement>, "id" | "viewBox" | "dangerouslySetInnerHTML">;
|
|
246
|
-
interface MermaidDiagramProps extends MermaidDiagramBaseProps {
|
|
247
|
-
/**
|
|
248
|
-
* Placeholder component to show when the diagram is loading.
|
|
249
|
-
* */
|
|
250
|
-
placeholder?: ReactNode | FC;
|
|
251
|
-
/**
|
|
252
|
-
* Error component to show when the diagram fails to render.
|
|
253
|
-
* If not provided, a simple error message will be shown.
|
|
254
|
-
*
|
|
255
|
-
* ```js
|
|
256
|
-
* <MermaidDiagram error={({ message }) => ...}>
|
|
257
|
-
* ...
|
|
258
|
-
* </MermaidDiagram>
|
|
259
|
-
* ```
|
|
260
|
-
* */
|
|
261
|
-
renderError?: ReactNode | FC<{
|
|
262
|
-
message: string;
|
|
263
|
-
}>;
|
|
264
|
-
/**
|
|
265
|
-
* Mermaid template to render the diagram.
|
|
266
|
-
* */
|
|
267
|
-
children: string;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* useMermaidDiagram is a hook that takes a mermaid template and returns a React component that renders the diagram.
|
|
272
|
-
* It also handle `loading` and `error` states. You rarely need to use this hook directly, use `MermaidDiagram` component instead.
|
|
273
|
-
*
|
|
274
|
-
* @example
|
|
275
|
-
*
|
|
276
|
-
* ```js
|
|
277
|
-
* const template = `
|
|
278
|
-
* graph TD;
|
|
279
|
-
* A-->B;
|
|
280
|
-
* A-->C;
|
|
281
|
-
* B-->D;
|
|
282
|
-
* C-->D;
|
|
283
|
-
* `;
|
|
284
|
-
*
|
|
285
|
-
* const { loading, error, Diagram } = useMermaidDiagram(template);
|
|
286
|
-
*
|
|
287
|
-
* if (loading) return <p>Loading...</p>;
|
|
288
|
-
*
|
|
289
|
-
* if (error) return <p>Error: {error}</p>;
|
|
290
|
-
*
|
|
291
|
-
* return <Diagram />;
|
|
292
|
-
* ```
|
|
293
|
-
* */
|
|
294
|
-
declare const useMermaidDiagram: (template: string) => {
|
|
295
|
-
loading: boolean;
|
|
296
|
-
error: string;
|
|
297
|
-
Diagram: react.FC<MermaidDiagramBaseProps> | null;
|
|
298
|
-
};
|
|
299
|
-
|
|
300
|
-
interface MarkdownProcessorOptions {
|
|
301
|
-
/**
|
|
302
|
-
* Enable HTML sanitization to prevent XSS attacks.
|
|
303
|
-
* Only set to false when you 100% trust the source.
|
|
304
|
-
* @default true
|
|
305
|
-
*/
|
|
306
|
-
sanitize?: boolean;
|
|
307
|
-
}
|
|
308
|
-
declare const createMarkdownProcessor: (options?: MarkdownProcessorOptions) => unified.Processor<mdast.Root, mdast.Root, hast.Root, hast.Root, string>;
|
|
309
|
-
|
|
310
|
-
interface UseMarkdownOptions extends MarkdownProcessorOptions {
|
|
311
|
-
/**
|
|
312
|
-
* Render the markdown asynchronously for large markdown content.
|
|
313
|
-
* Not intended for network requests - use for processing large markdown strings.
|
|
314
|
-
* @default false
|
|
315
|
-
* */
|
|
316
|
-
async?: boolean;
|
|
317
|
-
}
|
|
318
|
-
declare const useMarkdown: (str: string, options?: UseMarkdownOptions) => {
|
|
319
|
-
content: string;
|
|
320
|
-
error?: undefined;
|
|
321
|
-
loading?: undefined;
|
|
322
|
-
} | {
|
|
323
|
-
error: string;
|
|
324
|
-
content?: undefined;
|
|
325
|
-
loading?: undefined;
|
|
326
|
-
} | {
|
|
327
|
-
loading: boolean;
|
|
328
|
-
error: string;
|
|
329
|
-
content: string;
|
|
330
|
-
};
|
|
331
|
-
|
|
332
241
|
interface RHFBaseProps {
|
|
333
242
|
/**
|
|
334
243
|
* Name of the input field.(required)
|
|
@@ -3593,35 +3502,9 @@ declare const ConfirmDialog: {
|
|
|
3593
3502
|
};
|
|
3594
3503
|
|
|
3595
3504
|
interface GeckoUIPortalProps {
|
|
3596
|
-
mermaidConfig?: MermaidConfig;
|
|
3597
3505
|
toastOptions?: ToasterProps;
|
|
3598
3506
|
}
|
|
3599
3507
|
|
|
3600
|
-
/**
|
|
3601
|
-
* GeckoUIPortal is a container component that wraps the Toast, ConfirmDialog, and other components that need to mount at the top level of the application.
|
|
3602
|
-
*
|
|
3603
|
-
* Please refer to [MermaidOptions](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-schema) to see the available options for the `mermaidOptions` prop.
|
|
3604
|
-
* @example
|
|
3605
|
-
*
|
|
3606
|
-
* ```js
|
|
3607
|
-
* import { GeckoUIPortal } from '@geckoui/geckoui';
|
|
3608
|
-
*
|
|
3609
|
-
* renderApp(
|
|
3610
|
-
* <>
|
|
3611
|
-
* <App />
|
|
3612
|
-
* <GeckoUIPortal
|
|
3613
|
-
* toastOptions={{
|
|
3614
|
-
* position: 'bottom-right',
|
|
3615
|
-
* ... other options
|
|
3616
|
-
* }},
|
|
3617
|
-
* mermaidConfig={{
|
|
3618
|
-
* startOnLoad: true,
|
|
3619
|
-
* }}
|
|
3620
|
-
* />
|
|
3621
|
-
* </>
|
|
3622
|
-
* )
|
|
3623
|
-
* ```
|
|
3624
|
-
* */
|
|
3625
3508
|
declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
|
|
3626
3509
|
|
|
3627
3510
|
/** Extensible placement map - To allow module augmentation */
|
|
@@ -3915,150 +3798,6 @@ declare namespace Dropdown {
|
|
|
3915
3798
|
var displayName: string;
|
|
3916
3799
|
}
|
|
3917
3800
|
|
|
3918
|
-
/**
|
|
3919
|
-
* MermaidDiagram renders diagrams from Mermaid syntax with automatic loading and error state management.
|
|
3920
|
-
* Supports flowcharts, sequence diagrams, class diagrams, and all other Mermaid diagram types.
|
|
3921
|
-
* Provides custom placeholder and error rendering options.
|
|
3922
|
-
*
|
|
3923
|
-
* @example
|
|
3924
|
-
* Flowchart for user workflow:
|
|
3925
|
-
*
|
|
3926
|
-
* ```tsx
|
|
3927
|
-
* <MermaidDiagram>
|
|
3928
|
-
* {`
|
|
3929
|
-
* flowchart LR
|
|
3930
|
-
* Start[User Login] --> Auth{Authenticated?}
|
|
3931
|
-
* Auth -->|Yes| Dashboard[Show Dashboard]
|
|
3932
|
-
* Auth -->|No| Login[Login Page]
|
|
3933
|
-
* Login --> Auth
|
|
3934
|
-
* `}
|
|
3935
|
-
* </MermaidDiagram>
|
|
3936
|
-
* ```
|
|
3937
|
-
*
|
|
3938
|
-
* @example
|
|
3939
|
-
* Sequence diagram with custom loading:
|
|
3940
|
-
*
|
|
3941
|
-
* ```tsx
|
|
3942
|
-
* <MermaidDiagram
|
|
3943
|
-
* placeholder={<div className="animate-pulse">Loading diagram...</div>}
|
|
3944
|
-
* renderError={(props) => <ErrorBoundary message={props.message} />}
|
|
3945
|
-
* >
|
|
3946
|
-
* {`
|
|
3947
|
-
* sequenceDiagram
|
|
3948
|
-
* participant Client
|
|
3949
|
-
* participant API
|
|
3950
|
-
* participant Database
|
|
3951
|
-
* Client->>API: Request Data
|
|
3952
|
-
* API->>Database: Query
|
|
3953
|
-
* Database-->>API: Results
|
|
3954
|
-
* API-->>Client: Response
|
|
3955
|
-
* `}
|
|
3956
|
-
* </MermaidDiagram>
|
|
3957
|
-
* ```
|
|
3958
|
-
*
|
|
3959
|
-
* @example
|
|
3960
|
-
* Class diagram for documentation:
|
|
3961
|
-
*
|
|
3962
|
-
* ```tsx
|
|
3963
|
-
* <MermaidDiagram className="border rounded-lg p-4">
|
|
3964
|
-
* {`
|
|
3965
|
-
* classDiagram
|
|
3966
|
-
* class User {
|
|
3967
|
-
* +String email
|
|
3968
|
-
* +String name
|
|
3969
|
-
* +login()
|
|
3970
|
-
* +logout()
|
|
3971
|
-
* }
|
|
3972
|
-
* class Admin {
|
|
3973
|
-
* +manageUsers()
|
|
3974
|
-
* }
|
|
3975
|
-
* User <|-- Admin
|
|
3976
|
-
* `}
|
|
3977
|
-
* </MermaidDiagram>
|
|
3978
|
-
* ```
|
|
3979
|
-
*
|
|
3980
|
-
* @see https://mermaid.js.org/ for diagram syntax reference
|
|
3981
|
-
*/
|
|
3982
|
-
declare const MermaidDiagram: FC<MermaidDiagramProps>;
|
|
3983
|
-
|
|
3984
|
-
interface MarkdownBaseProps<T extends keyof JSX.IntrinsicElements> extends UseMarkdownOptions {
|
|
3985
|
-
/**
|
|
3986
|
-
* HTML tag to render the markdown content.
|
|
3987
|
-
* @default "div"
|
|
3988
|
-
*/
|
|
3989
|
-
as?: T;
|
|
3990
|
-
/**
|
|
3991
|
-
* Placeholder component to show while async rendering is in progress.
|
|
3992
|
-
* Will be ignored if async is false.
|
|
3993
|
-
*/
|
|
3994
|
-
renderPlaceholder?: ReactNode | FC;
|
|
3995
|
-
/**
|
|
3996
|
-
* Error component to show when the markdown fails to render.
|
|
3997
|
-
* If not provided, a simple error message will be shown.
|
|
3998
|
-
*/
|
|
3999
|
-
renderError?: ReactNode | FC<{
|
|
4000
|
-
message: string;
|
|
4001
|
-
}>;
|
|
4002
|
-
/**
|
|
4003
|
-
* Markdown content to render.
|
|
4004
|
-
*/
|
|
4005
|
-
children: string;
|
|
4006
|
-
}
|
|
4007
|
-
type InferredProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] & {
|
|
4008
|
-
className?: string;
|
|
4009
|
-
};
|
|
4010
|
-
type MarkdownProps<T extends keyof JSX.IntrinsicElements = "div"> = MarkdownBaseProps<T> & Omit<InferredProps<T>, "children">;
|
|
4011
|
-
|
|
4012
|
-
/**
|
|
4013
|
-
* Markdown renders formatted markdown text as HTML with support for both synchronous
|
|
4014
|
-
* and asynchronous rendering. Includes built-in loading states, error handling, and
|
|
4015
|
-
* HTML sanitization enabled by default for security.
|
|
4016
|
-
*
|
|
4017
|
-
* @example
|
|
4018
|
-
* Basic usage (synchronous rendering with sanitization enabled by default):
|
|
4019
|
-
*
|
|
4020
|
-
* ```tsx
|
|
4021
|
-
* <Markdown className="prose">{docs}</Markdown>
|
|
4022
|
-
* ```
|
|
4023
|
-
*
|
|
4024
|
-
* @example
|
|
4025
|
-
* Async rendering for large markdown content (not for network requests):
|
|
4026
|
-
*
|
|
4027
|
-
* ```tsx
|
|
4028
|
-
* const [largeContent, setLargeContent] = useState('');
|
|
4029
|
-
*
|
|
4030
|
-
* <Markdown
|
|
4031
|
-
* async
|
|
4032
|
-
* renderPlaceholder={<Spinner />}
|
|
4033
|
-
* renderError={(props) => <Alert variant="error">{props.message}</Alert>}
|
|
4034
|
-
* >
|
|
4035
|
-
* {largeContent}
|
|
4036
|
-
* </Markdown>
|
|
4037
|
-
* ```
|
|
4038
|
-
*
|
|
4039
|
-
* @example
|
|
4040
|
-
* Disabling HTML sanitization (⚠️ WARNING: Only use when you 100% trust the source):
|
|
4041
|
-
*
|
|
4042
|
-
* ```tsx
|
|
4043
|
-
* <Markdown sanitize={false} as="article">
|
|
4044
|
-
* {trustedMarkdown}
|
|
4045
|
-
* </Markdown>
|
|
4046
|
-
* ```
|
|
4047
|
-
*
|
|
4048
|
-
* @example
|
|
4049
|
-
* Using with anchor tag and href prop:
|
|
4050
|
-
*
|
|
4051
|
-
* ```tsx
|
|
4052
|
-
* <Markdown as="a" href="https://example.com" target="_blank">
|
|
4053
|
-
* {linkMarkdown}
|
|
4054
|
-
* </Markdown>
|
|
4055
|
-
* ```
|
|
4056
|
-
*/
|
|
4057
|
-
declare function Markdown<T extends keyof JSX.IntrinsicElements = "div">({ children, renderError, renderPlaceholder, as, async, className, sanitize, ...props }: MarkdownProps<T>): react_jsx_runtime.JSX.Element;
|
|
4058
|
-
declare namespace Markdown {
|
|
4059
|
-
var displayName: string;
|
|
4060
|
-
}
|
|
4061
|
-
|
|
4062
3801
|
type BaseIconProps = SVGProps<SVGSVGElement>;
|
|
4063
3802
|
|
|
4064
3803
|
/**
|
|
@@ -4130,4 +3869,4 @@ declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
|
|
|
4130
3869
|
|
|
4131
3870
|
declare const FilePicker: typeof FileOnlyPickerHandler;
|
|
4132
3871
|
|
|
4133
|
-
export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, Dropdown, type DropdownClassName, type DropdownItem, type DropdownProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps,
|
|
3872
|
+
export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, Dropdown, type DropdownClassName, type DropdownItem, type DropdownProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps, Menu, MenuButton, type MenuButtonProps, MenuHeading, MenuItem, type MenuItemProps, MenuItems, type MenuItemsProps, MenuSection, MenuSeparator, type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectTriggerRenderProps, OTPInput, type OTPInputProps, type OpenFilePickerFn, type OpenFilePickerOptions, Pagination, type PaginationProps, type RHFBaseProps, RHFCheckbox, type RHFCheckboxProps, RHFController, RHFCounterInput, type RHFCounterInputProps, RHFCurrencyInput, type RHFCurrencyInputProps, RHFDateInput, type RHFDateInputProps, RHFDateRangeInput, type RHFDateRangeInputProps, RHFError, type RHFErrorProps, type RHFErrorRenderProps, RHFFileInput, type RHFFileInputProps, RHFFilePicker, type RHFFilePickerBaseProps, type RHFFilePickerProps, type RHFFilePickerRenderProps, type RHFFilePickerRendererProps, RHFInput, RHFInputGroup, type RHFInputGroupProps, type RHFInputProps, RHFNumberInput, type RHFNumberInputProps, RHFOTPInput, type RHFOTPInputProps, RHFRadio, type RHFRadioProps, type RHFRenderArgs, RHFSelect, type RHFSelectOverload, type RHFSelectProps, RHFSwitch, type RHFSwitchProps, RHFTextarea, type RHFTextareaProps, Radio, type RadioProps, type ReactTag, Select, SelectConsumer, type SelectConsumerProps, type SelectContextProps, SelectDropdownSearch, SelectEmpty, type SelectEmptyProps, SelectOption, type SelectOptionConfig, type SelectOptionElement, type SelectOptionProps, type SelectOverload, type SelectProps, SelectTrigger, type SelectTriggerBaseRenderProps, type SelectTriggerOverload, type SelectTriggerProps, type SelectionMode, type SingleSelectProps, type SingleSelectTriggerProps, type SingleSelectTriggerRenderProps, Spinner, Switch, type SwitchProps, type SwitchSizeMap, Textarea, type TextareaProps, Tooltip, type TooltipProps, type UseFilePickerOptions, type UseFilePickerReturn, fileToUInt8Array, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, toThousandsSeparatorFormat, useClickOutside, useEscListener, useFilePicker, usePreventDefault, useSelect };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { RefObject,
|
|
3
|
-
import * as unified from 'unified';
|
|
4
|
-
import * as hast from 'hast';
|
|
5
|
-
import * as mdast from 'mdast';
|
|
2
|
+
import react__default, { RefObject, InputHTMLAttributes, FC, ReactNode, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor, SVGProps } from 'react';
|
|
6
3
|
import { ControllerProps, Control, FieldValues, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
|
|
7
4
|
import { Placement, Strategy, useFloating } from '@floating-ui/react';
|
|
8
5
|
import { TextareaAutosizeProps } from 'react-textarea-autosize';
|
|
@@ -11,7 +8,6 @@ import { SwitchProps as SwitchProps$1, MenuItemsProps as MenuItemsProps$1, MenuB
|
|
|
11
8
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
12
9
|
import { ToasterProps } from 'sonner';
|
|
13
10
|
export { toast } from 'sonner';
|
|
14
|
-
import { MermaidConfig } from 'mermaid';
|
|
15
11
|
|
|
16
12
|
/**
|
|
17
13
|
* Reuseable hook to detect clicks outside of a ref element that is passed as an argument
|
|
@@ -242,93 +238,6 @@ declare const usePreventDefault: () => {
|
|
|
242
238
|
* */
|
|
243
239
|
declare const useEscListener: (callback?: () => void) => void;
|
|
244
240
|
|
|
245
|
-
type MermaidDiagramBaseProps = Omit<SVGProps<SVGSVGElement>, "id" | "viewBox" | "dangerouslySetInnerHTML">;
|
|
246
|
-
interface MermaidDiagramProps extends MermaidDiagramBaseProps {
|
|
247
|
-
/**
|
|
248
|
-
* Placeholder component to show when the diagram is loading.
|
|
249
|
-
* */
|
|
250
|
-
placeholder?: ReactNode | FC;
|
|
251
|
-
/**
|
|
252
|
-
* Error component to show when the diagram fails to render.
|
|
253
|
-
* If not provided, a simple error message will be shown.
|
|
254
|
-
*
|
|
255
|
-
* ```js
|
|
256
|
-
* <MermaidDiagram error={({ message }) => ...}>
|
|
257
|
-
* ...
|
|
258
|
-
* </MermaidDiagram>
|
|
259
|
-
* ```
|
|
260
|
-
* */
|
|
261
|
-
renderError?: ReactNode | FC<{
|
|
262
|
-
message: string;
|
|
263
|
-
}>;
|
|
264
|
-
/**
|
|
265
|
-
* Mermaid template to render the diagram.
|
|
266
|
-
* */
|
|
267
|
-
children: string;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* useMermaidDiagram is a hook that takes a mermaid template and returns a React component that renders the diagram.
|
|
272
|
-
* It also handle `loading` and `error` states. You rarely need to use this hook directly, use `MermaidDiagram` component instead.
|
|
273
|
-
*
|
|
274
|
-
* @example
|
|
275
|
-
*
|
|
276
|
-
* ```js
|
|
277
|
-
* const template = `
|
|
278
|
-
* graph TD;
|
|
279
|
-
* A-->B;
|
|
280
|
-
* A-->C;
|
|
281
|
-
* B-->D;
|
|
282
|
-
* C-->D;
|
|
283
|
-
* `;
|
|
284
|
-
*
|
|
285
|
-
* const { loading, error, Diagram } = useMermaidDiagram(template);
|
|
286
|
-
*
|
|
287
|
-
* if (loading) return <p>Loading...</p>;
|
|
288
|
-
*
|
|
289
|
-
* if (error) return <p>Error: {error}</p>;
|
|
290
|
-
*
|
|
291
|
-
* return <Diagram />;
|
|
292
|
-
* ```
|
|
293
|
-
* */
|
|
294
|
-
declare const useMermaidDiagram: (template: string) => {
|
|
295
|
-
loading: boolean;
|
|
296
|
-
error: string;
|
|
297
|
-
Diagram: react.FC<MermaidDiagramBaseProps> | null;
|
|
298
|
-
};
|
|
299
|
-
|
|
300
|
-
interface MarkdownProcessorOptions {
|
|
301
|
-
/**
|
|
302
|
-
* Enable HTML sanitization to prevent XSS attacks.
|
|
303
|
-
* Only set to false when you 100% trust the source.
|
|
304
|
-
* @default true
|
|
305
|
-
*/
|
|
306
|
-
sanitize?: boolean;
|
|
307
|
-
}
|
|
308
|
-
declare const createMarkdownProcessor: (options?: MarkdownProcessorOptions) => unified.Processor<mdast.Root, mdast.Root, hast.Root, hast.Root, string>;
|
|
309
|
-
|
|
310
|
-
interface UseMarkdownOptions extends MarkdownProcessorOptions {
|
|
311
|
-
/**
|
|
312
|
-
* Render the markdown asynchronously for large markdown content.
|
|
313
|
-
* Not intended for network requests - use for processing large markdown strings.
|
|
314
|
-
* @default false
|
|
315
|
-
* */
|
|
316
|
-
async?: boolean;
|
|
317
|
-
}
|
|
318
|
-
declare const useMarkdown: (str: string, options?: UseMarkdownOptions) => {
|
|
319
|
-
content: string;
|
|
320
|
-
error?: undefined;
|
|
321
|
-
loading?: undefined;
|
|
322
|
-
} | {
|
|
323
|
-
error: string;
|
|
324
|
-
content?: undefined;
|
|
325
|
-
loading?: undefined;
|
|
326
|
-
} | {
|
|
327
|
-
loading: boolean;
|
|
328
|
-
error: string;
|
|
329
|
-
content: string;
|
|
330
|
-
};
|
|
331
|
-
|
|
332
241
|
interface RHFBaseProps {
|
|
333
242
|
/**
|
|
334
243
|
* Name of the input field.(required)
|
|
@@ -3593,35 +3502,9 @@ declare const ConfirmDialog: {
|
|
|
3593
3502
|
};
|
|
3594
3503
|
|
|
3595
3504
|
interface GeckoUIPortalProps {
|
|
3596
|
-
mermaidConfig?: MermaidConfig;
|
|
3597
3505
|
toastOptions?: ToasterProps;
|
|
3598
3506
|
}
|
|
3599
3507
|
|
|
3600
|
-
/**
|
|
3601
|
-
* GeckoUIPortal is a container component that wraps the Toast, ConfirmDialog, and other components that need to mount at the top level of the application.
|
|
3602
|
-
*
|
|
3603
|
-
* Please refer to [MermaidOptions](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-schema) to see the available options for the `mermaidOptions` prop.
|
|
3604
|
-
* @example
|
|
3605
|
-
*
|
|
3606
|
-
* ```js
|
|
3607
|
-
* import { GeckoUIPortal } from '@geckoui/geckoui';
|
|
3608
|
-
*
|
|
3609
|
-
* renderApp(
|
|
3610
|
-
* <>
|
|
3611
|
-
* <App />
|
|
3612
|
-
* <GeckoUIPortal
|
|
3613
|
-
* toastOptions={{
|
|
3614
|
-
* position: 'bottom-right',
|
|
3615
|
-
* ... other options
|
|
3616
|
-
* }},
|
|
3617
|
-
* mermaidConfig={{
|
|
3618
|
-
* startOnLoad: true,
|
|
3619
|
-
* }}
|
|
3620
|
-
* />
|
|
3621
|
-
* </>
|
|
3622
|
-
* )
|
|
3623
|
-
* ```
|
|
3624
|
-
* */
|
|
3625
3508
|
declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
|
|
3626
3509
|
|
|
3627
3510
|
/** Extensible placement map - To allow module augmentation */
|
|
@@ -3915,150 +3798,6 @@ declare namespace Dropdown {
|
|
|
3915
3798
|
var displayName: string;
|
|
3916
3799
|
}
|
|
3917
3800
|
|
|
3918
|
-
/**
|
|
3919
|
-
* MermaidDiagram renders diagrams from Mermaid syntax with automatic loading and error state management.
|
|
3920
|
-
* Supports flowcharts, sequence diagrams, class diagrams, and all other Mermaid diagram types.
|
|
3921
|
-
* Provides custom placeholder and error rendering options.
|
|
3922
|
-
*
|
|
3923
|
-
* @example
|
|
3924
|
-
* Flowchart for user workflow:
|
|
3925
|
-
*
|
|
3926
|
-
* ```tsx
|
|
3927
|
-
* <MermaidDiagram>
|
|
3928
|
-
* {`
|
|
3929
|
-
* flowchart LR
|
|
3930
|
-
* Start[User Login] --> Auth{Authenticated?}
|
|
3931
|
-
* Auth -->|Yes| Dashboard[Show Dashboard]
|
|
3932
|
-
* Auth -->|No| Login[Login Page]
|
|
3933
|
-
* Login --> Auth
|
|
3934
|
-
* `}
|
|
3935
|
-
* </MermaidDiagram>
|
|
3936
|
-
* ```
|
|
3937
|
-
*
|
|
3938
|
-
* @example
|
|
3939
|
-
* Sequence diagram with custom loading:
|
|
3940
|
-
*
|
|
3941
|
-
* ```tsx
|
|
3942
|
-
* <MermaidDiagram
|
|
3943
|
-
* placeholder={<div className="animate-pulse">Loading diagram...</div>}
|
|
3944
|
-
* renderError={(props) => <ErrorBoundary message={props.message} />}
|
|
3945
|
-
* >
|
|
3946
|
-
* {`
|
|
3947
|
-
* sequenceDiagram
|
|
3948
|
-
* participant Client
|
|
3949
|
-
* participant API
|
|
3950
|
-
* participant Database
|
|
3951
|
-
* Client->>API: Request Data
|
|
3952
|
-
* API->>Database: Query
|
|
3953
|
-
* Database-->>API: Results
|
|
3954
|
-
* API-->>Client: Response
|
|
3955
|
-
* `}
|
|
3956
|
-
* </MermaidDiagram>
|
|
3957
|
-
* ```
|
|
3958
|
-
*
|
|
3959
|
-
* @example
|
|
3960
|
-
* Class diagram for documentation:
|
|
3961
|
-
*
|
|
3962
|
-
* ```tsx
|
|
3963
|
-
* <MermaidDiagram className="border rounded-lg p-4">
|
|
3964
|
-
* {`
|
|
3965
|
-
* classDiagram
|
|
3966
|
-
* class User {
|
|
3967
|
-
* +String email
|
|
3968
|
-
* +String name
|
|
3969
|
-
* +login()
|
|
3970
|
-
* +logout()
|
|
3971
|
-
* }
|
|
3972
|
-
* class Admin {
|
|
3973
|
-
* +manageUsers()
|
|
3974
|
-
* }
|
|
3975
|
-
* User <|-- Admin
|
|
3976
|
-
* `}
|
|
3977
|
-
* </MermaidDiagram>
|
|
3978
|
-
* ```
|
|
3979
|
-
*
|
|
3980
|
-
* @see https://mermaid.js.org/ for diagram syntax reference
|
|
3981
|
-
*/
|
|
3982
|
-
declare const MermaidDiagram: FC<MermaidDiagramProps>;
|
|
3983
|
-
|
|
3984
|
-
interface MarkdownBaseProps<T extends keyof JSX.IntrinsicElements> extends UseMarkdownOptions {
|
|
3985
|
-
/**
|
|
3986
|
-
* HTML tag to render the markdown content.
|
|
3987
|
-
* @default "div"
|
|
3988
|
-
*/
|
|
3989
|
-
as?: T;
|
|
3990
|
-
/**
|
|
3991
|
-
* Placeholder component to show while async rendering is in progress.
|
|
3992
|
-
* Will be ignored if async is false.
|
|
3993
|
-
*/
|
|
3994
|
-
renderPlaceholder?: ReactNode | FC;
|
|
3995
|
-
/**
|
|
3996
|
-
* Error component to show when the markdown fails to render.
|
|
3997
|
-
* If not provided, a simple error message will be shown.
|
|
3998
|
-
*/
|
|
3999
|
-
renderError?: ReactNode | FC<{
|
|
4000
|
-
message: string;
|
|
4001
|
-
}>;
|
|
4002
|
-
/**
|
|
4003
|
-
* Markdown content to render.
|
|
4004
|
-
*/
|
|
4005
|
-
children: string;
|
|
4006
|
-
}
|
|
4007
|
-
type InferredProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] & {
|
|
4008
|
-
className?: string;
|
|
4009
|
-
};
|
|
4010
|
-
type MarkdownProps<T extends keyof JSX.IntrinsicElements = "div"> = MarkdownBaseProps<T> & Omit<InferredProps<T>, "children">;
|
|
4011
|
-
|
|
4012
|
-
/**
|
|
4013
|
-
* Markdown renders formatted markdown text as HTML with support for both synchronous
|
|
4014
|
-
* and asynchronous rendering. Includes built-in loading states, error handling, and
|
|
4015
|
-
* HTML sanitization enabled by default for security.
|
|
4016
|
-
*
|
|
4017
|
-
* @example
|
|
4018
|
-
* Basic usage (synchronous rendering with sanitization enabled by default):
|
|
4019
|
-
*
|
|
4020
|
-
* ```tsx
|
|
4021
|
-
* <Markdown className="prose">{docs}</Markdown>
|
|
4022
|
-
* ```
|
|
4023
|
-
*
|
|
4024
|
-
* @example
|
|
4025
|
-
* Async rendering for large markdown content (not for network requests):
|
|
4026
|
-
*
|
|
4027
|
-
* ```tsx
|
|
4028
|
-
* const [largeContent, setLargeContent] = useState('');
|
|
4029
|
-
*
|
|
4030
|
-
* <Markdown
|
|
4031
|
-
* async
|
|
4032
|
-
* renderPlaceholder={<Spinner />}
|
|
4033
|
-
* renderError={(props) => <Alert variant="error">{props.message}</Alert>}
|
|
4034
|
-
* >
|
|
4035
|
-
* {largeContent}
|
|
4036
|
-
* </Markdown>
|
|
4037
|
-
* ```
|
|
4038
|
-
*
|
|
4039
|
-
* @example
|
|
4040
|
-
* Disabling HTML sanitization (⚠️ WARNING: Only use when you 100% trust the source):
|
|
4041
|
-
*
|
|
4042
|
-
* ```tsx
|
|
4043
|
-
* <Markdown sanitize={false} as="article">
|
|
4044
|
-
* {trustedMarkdown}
|
|
4045
|
-
* </Markdown>
|
|
4046
|
-
* ```
|
|
4047
|
-
*
|
|
4048
|
-
* @example
|
|
4049
|
-
* Using with anchor tag and href prop:
|
|
4050
|
-
*
|
|
4051
|
-
* ```tsx
|
|
4052
|
-
* <Markdown as="a" href="https://example.com" target="_blank">
|
|
4053
|
-
* {linkMarkdown}
|
|
4054
|
-
* </Markdown>
|
|
4055
|
-
* ```
|
|
4056
|
-
*/
|
|
4057
|
-
declare function Markdown<T extends keyof JSX.IntrinsicElements = "div">({ children, renderError, renderPlaceholder, as, async, className, sanitize, ...props }: MarkdownProps<T>): react_jsx_runtime.JSX.Element;
|
|
4058
|
-
declare namespace Markdown {
|
|
4059
|
-
var displayName: string;
|
|
4060
|
-
}
|
|
4061
|
-
|
|
4062
3801
|
type BaseIconProps = SVGProps<SVGSVGElement>;
|
|
4063
3802
|
|
|
4064
3803
|
/**
|
|
@@ -4130,4 +3869,4 @@ declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
|
|
|
4130
3869
|
|
|
4131
3870
|
declare const FilePicker: typeof FileOnlyPickerHandler;
|
|
4132
3871
|
|
|
4133
|
-
export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, Dropdown, type DropdownClassName, type DropdownItem, type DropdownProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps,
|
|
3872
|
+
export { type ActionsArgs, Alert, type AlertProps, type AlertVariantMap, BaseDateRangeInput, type BaseDateRangeInputProps, type BaseSelectProps, Button, type ButtonColorMap, type ButtonProps, type ButtonSizeMap, type ButtonVariantMap, _default as Calendar, type CalendarActiveProps, type CalendarOverload, type CalendarProps, type CalendarRangeModeProps, type CalendarRef, type CalendarSingleModeProps, CalendarType, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogActionsArgs, type ConfirmDialogContentProps, type ConfirmDialogOptions, CounterInput, type CounterInputProps, type CounterInputSizeMap, type CustomSelectOptionArgs, type CustomSelectOptionBaseArgs, type DataAttributeProps, type DateFormat$1 as DateFormat, DateInput, type DateInputProps, type DateRange, DateRangeInput, type DateRangeInputProps, type DayCellRenderProps, Dialog, type DialogContentProps, type DialogOptions, Drawer, type DrawerPlacementMap, type DrawerProps, Dropdown, type DropdownClassName, type DropdownItem, type DropdownProps, FilePicker, type FilePickerFile, type FilePickerOptions, type FileSize, type FileWithPreview, type FocusedOption, GeckoUIPortal, type GeckoUIPortalProps, Input, InputError, type InputErrorProps, type InputProps, Label, type LabelProps, LoadingButton, type LoadingButtonProps, Menu, MenuButton, type MenuButtonProps, MenuHeading, MenuItem, type MenuItemProps, MenuItems, type MenuItemsProps, MenuSection, MenuSeparator, type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectTriggerRenderProps, OTPInput, type OTPInputProps, type OpenFilePickerFn, type OpenFilePickerOptions, Pagination, type PaginationProps, type RHFBaseProps, RHFCheckbox, type RHFCheckboxProps, RHFController, RHFCounterInput, type RHFCounterInputProps, RHFCurrencyInput, type RHFCurrencyInputProps, RHFDateInput, type RHFDateInputProps, RHFDateRangeInput, type RHFDateRangeInputProps, RHFError, type RHFErrorProps, type RHFErrorRenderProps, RHFFileInput, type RHFFileInputProps, RHFFilePicker, type RHFFilePickerBaseProps, type RHFFilePickerProps, type RHFFilePickerRenderProps, type RHFFilePickerRendererProps, RHFInput, RHFInputGroup, type RHFInputGroupProps, type RHFInputProps, RHFNumberInput, type RHFNumberInputProps, RHFOTPInput, type RHFOTPInputProps, RHFRadio, type RHFRadioProps, type RHFRenderArgs, RHFSelect, type RHFSelectOverload, type RHFSelectProps, RHFSwitch, type RHFSwitchProps, RHFTextarea, type RHFTextareaProps, Radio, type RadioProps, type ReactTag, Select, SelectConsumer, type SelectConsumerProps, type SelectContextProps, SelectDropdownSearch, SelectEmpty, type SelectEmptyProps, SelectOption, type SelectOptionConfig, type SelectOptionElement, type SelectOptionProps, type SelectOverload, type SelectProps, SelectTrigger, type SelectTriggerBaseRenderProps, type SelectTriggerOverload, type SelectTriggerProps, type SelectionMode, type SingleSelectProps, type SingleSelectTriggerProps, type SingleSelectTriggerRenderProps, Spinner, Switch, type SwitchProps, type SwitchSizeMap, Textarea, type TextareaProps, Tooltip, type TooltipProps, type UseFilePickerOptions, type UseFilePickerReturn, fileToUInt8Array, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, toThousandsSeparatorFormat, useClickOutside, useEscListener, useFilePicker, usePreventDefault, useSelect };
|