@geckoui/geckoui 1.2.0-beta.0 → 1.2.0-beta.2

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 CHANGED
@@ -1,8 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { RefObject, SVGProps, ReactNode, FC, InputHTMLAttributes, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor } from 'react';
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)
@@ -3080,9 +2989,12 @@ interface TooltipProps extends PropsWithChildren {
3080
2989
  * */
3081
2990
  triggerClassName?: string;
3082
2991
  /**
3083
- * Whether consider the trigger as a child
3084
- * Use this to avoid invalid button nesting errors when using a button as the trigger
3085
- * If you use custom components as the trigger, you might need to wrap with `forwardRef`
2992
+ * Classname to apply to the tooltip arrow
2993
+ * */
2994
+ arrowClassName?: string;
2995
+ /**
2996
+ * Whether to use the child element directly as the trigger.
2997
+ * Use this to avoid invalid button nesting errors when using a button as the trigger.
3086
2998
  * */
3087
2999
  triggerAsChild?: boolean;
3088
3000
  /**
@@ -3092,60 +3004,13 @@ interface TooltipProps extends PropsWithChildren {
3092
3004
  /**
3093
3005
  * The side of the tooltip to display
3094
3006
  * */
3095
- side?: "top" | "right" | "bottom" | "left";
3007
+ side?: Placement;
3096
3008
  /**
3097
3009
  * The offset of the tooltip from the trigger
3098
3010
  * */
3099
3011
  sideOffset?: number;
3100
3012
  }
3101
3013
 
3102
- /**
3103
- * Tooltip displays contextual information in a floating overlay when users hover over or focus on an element.
3104
- * Built on Radix UI, it provides accessible tooltips with customizable positioning, delays, and styling.
3105
- * Returns children unchanged if no content is provided.
3106
- *
3107
- * @example
3108
- * Icon button with helpful hint:
3109
- *
3110
- * ```tsx
3111
- * <Tooltip content="Add new item" side="right" delayDuration={300}>
3112
- * <button className="p-2">
3113
- * <PlusIcon />
3114
- * </button>
3115
- * </Tooltip>
3116
- * ```
3117
- *
3118
- * @example
3119
- * Complex tooltip content:
3120
- *
3121
- * ```tsx
3122
- * <Tooltip
3123
- * content={
3124
- * <div>
3125
- * <strong>Premium Feature</strong>
3126
- * <p>Upgrade to access this feature</p>
3127
- * </div>
3128
- * }
3129
- * backgroundColor="#1f2937"
3130
- * sideOffset={10}
3131
- * >
3132
- * <LockIcon />
3133
- * </Tooltip>
3134
- * ```
3135
- *
3136
- * @example
3137
- * Bottom-positioned with custom delay:
3138
- *
3139
- * ```tsx
3140
- * <Tooltip
3141
- * content="Last updated: 2 hours ago"
3142
- * side="bottom"
3143
- * delayDuration={500}
3144
- * >
3145
- * <span>Status: Active</span>
3146
- * </Tooltip>
3147
- * ```
3148
- */
3149
3014
  declare const Tooltip: FC<TooltipProps>;
3150
3015
 
3151
3016
  /** Extensible variant map - To allow module augmentation */
@@ -3593,35 +3458,9 @@ declare const ConfirmDialog: {
3593
3458
  };
3594
3459
 
3595
3460
  interface GeckoUIPortalProps {
3596
- mermaidConfig?: MermaidConfig;
3597
3461
  toastOptions?: ToasterProps;
3598
3462
  }
3599
3463
 
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
3464
  declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
3626
3465
 
3627
3466
  /** Extensible placement map - To allow module augmentation */
@@ -3915,150 +3754,6 @@ declare namespace Dropdown {
3915
3754
  var displayName: string;
3916
3755
  }
3917
3756
 
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
3757
  type BaseIconProps = SVGProps<SVGSVGElement>;
4063
3758
 
4064
3759
  /**
@@ -4130,4 +3825,4 @@ declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
4130
3825
 
4131
3826
  declare const FilePicker: typeof FileOnlyPickerHandler;
4132
3827
 
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, Markdown, type MarkdownBaseProps, type MarkdownProcessorOptions, type MarkdownProps, Menu, MenuButton, type MenuButtonProps, MenuHeading, MenuItem, type MenuItemProps, MenuItems, type MenuItemsProps, MenuSection, MenuSeparator, MermaidDiagram, type MermaidDiagramBaseProps, type MermaidDiagramProps, 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, createMarkdownProcessor, fileToUInt8Array, getDataAttributes, hasDisplayName, isAsyncFn, isTwoFileEqualByFileContent, toThousandsSeparatorFormat, useClickOutside, useEscListener, useFilePicker, useMarkdown, useMermaidDiagram, usePreventDefault, useSelect };
3828
+ 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 };