@geckoui/geckoui 1.1.2 → 1.2.0-beta.1

package/dist/index.css

@@ -0,0 +1,16 @@
+/* src/components/RHF/RHFCounterInput/RHFCounterInput.scss */
+.GeckoUIRHFCounterInput--error .GeckoUICounterInput__button,
+.GeckoUIRHFCounterInput--error .GeckoUICounterInput__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+.GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__button,
+.GeckoUIRHFCounterInput--error:hover .GeckoUICounterInput__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
+}
+.GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__button,
+.GeckoUIRHFCounterInput--error:focus-within .GeckoUICounterInput__input {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}

package/dist/index.d.mts

@@ -1,8 +1,5 @@
 import * as react from 'react';
-import react__default, { RefObject, SVGProps, ReactNode, FC, InputHTMLAttributes, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor } from 'react';
-import * as unified from 'unified';
-import * as hast from 'hast';
-import * as mdast from 'mdast';
+import react__default, { RefObject, InputHTMLAttributes, FC, ReactNode, JSX, ForwardedRef, LabelHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, DetailedHTMLProps, ReactElement, RefCallback, Dispatch, SetStateAction, HtmlHTMLAttributes, ChangeEvent, HTMLAttributes, JSXElementConstructor, SVGProps } from 'react';
 import { ControllerProps, Control, FieldValues, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 import { Placement, Strategy, useFloating } from '@floating-ui/react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
@@ -11,7 +8,6 @@ import { SwitchProps as SwitchProps$1, MenuItemsProps as MenuItemsProps$1, MenuB
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ToasterProps } from 'sonner';
 export { toast } from 'sonner';
-import { MermaidConfig } from 'mermaid';
 
 /**
  * Reuseable hook to detect clicks outside of a ref element that is passed as an argument
@@ -242,93 +238,6 @@ declare const usePreventDefault: () => {
  * */
 declare const useEscListener: (callback?: () => void) => void;
 
-type MermaidDiagramBaseProps = Omit<SVGProps<SVGSVGElement>, "id" | "viewBox" | "dangerouslySetInnerHTML">;
-interface MermaidDiagramProps extends MermaidDiagramBaseProps {
-    /**
-     * Placeholder component to show when the diagram is loading.
-     * */
-    placeholder?: ReactNode | FC;
-    /**
-     * Error component to show when the diagram fails to render.
-     * If not provided, a simple error message will be shown.
-     *
-     * ```js
-     * <MermaidDiagram error={({ message }) => ...}>
-     *  ...
-     * </MermaidDiagram>
-     * ```
-     * */
-    renderError?: ReactNode | FC<{
-        message: string;
-    }>;
-    /**
-     * Mermaid template to render the diagram.
-     * */
-    children: string;
-}
-
-/**
- * useMermaidDiagram is a hook that takes a mermaid template and returns a React component that renders the diagram.
- * It also handle `loading` and `error` states. You rarely need to use this hook directly, use `MermaidDiagram` component instead.
- *
- * @example
- *
- * ```js
- * const template = `
- * graph TD;
- *    A-->B;
- *    A-->C;
- *    B-->D;
- *    C-->D;
- * `;
- *
- * const { loading, error, Diagram } = useMermaidDiagram(template);
- *
- * if (loading) return <p>Loading...</p>;
- *
- * if (error) return <p>Error: {error}</p>;
- *
- * return <Diagram />;
- * ```
- * */
-declare const useMermaidDiagram: (template: string) => {
-    loading: boolean;
-    error: string;
-    Diagram: react.FC<MermaidDiagramBaseProps> | null;
-};
-
-interface MarkdownProcessorOptions {
-    /**
-     * Enable HTML sanitization to prevent XSS attacks.
-     * Only set to false when you 100% trust the source.
-     * @default true
-     */
-    sanitize?: boolean;
-}
-declare const createMarkdownProcessor: (options?: MarkdownProcessorOptions) => unified.Processor<mdast.Root, mdast.Root, hast.Root, hast.Root, string>;
-
-interface UseMarkdownOptions extends MarkdownProcessorOptions {
-    /**
-     * Render the markdown asynchronously for large markdown content.
-     * Not intended for network requests - use for processing large markdown strings.
-     * @default false
-     * */
-    async?: boolean;
-}
-declare const useMarkdown: (str: string, options?: UseMarkdownOptions) => {
-    content: string;
-    error?: undefined;
-    loading?: undefined;
-} | {
-    error: string;
-    content?: undefined;
-    loading?: undefined;
-} | {
-    loading: boolean;
-    error: string;
-    content: string;
-};
-
 interface RHFBaseProps {
     /**
      * Name of the input field.(required)
@@ -396,6 +305,47 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "typ
  */
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface CounterInputSizeMap {
+    sm: unknown;
+    md: unknown;
+    lg: unknown;
+}
+interface CounterInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    /** Current numeric value */
+    value: number;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Increment/decrement step (default: 1) */
+    step?: number;
+    /** Size variant (default: 'md') */
+    size?: keyof CounterInputSizeMap;
+    /** Disable the entire component */
+    disabled?: boolean;
+    /** Read-only mode - buttons and input are non-interactive */
+    readOnly?: boolean;
+    /** Allow typing in input field (default: false) */
+    editable?: boolean;
+    /** Class name for the input element */
+    inputClassName?: string;
+    /** Class name for the buttons */
+    buttonClassName?: string;
+}
+
+/**
+ * A numeric input component with increment/decrement buttons.
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = useState(0);
+ * <CounterInput value={count} onChange={setCount} min={0} max={10} />
+ * ```
+ */
+declare const CounterInput: react.ForwardRefExoticComponent<CounterInputProps & react.RefAttributes<HTMLInputElement>>;
+
 type DateFormat$2 = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";
 interface BaseDateInputProps {
     value?: string | null;
@@ -1128,6 +1078,22 @@ interface RHFCheckboxProps extends RHFBaseProps, Omit<CheckboxProps, "name" | "v
  */
 declare const RHFCheckbox: FC<RHFCheckboxProps>;
 
+interface RHFCounterInputProps extends RHFBaseProps, Omit<CounterInputProps, "name" | "value" | "onChange"> {
+    onChange?: (value: number) => void;
+}
+
+/**
+ * A numeric counter input component integrated with React Hook Form.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <RHFCounterInput name="quantity" min={0} max={10} />
+ * </FormProvider>
+ * ```
+ */
+declare const RHFCounterInput: FC<RHFCounterInputProps>;
+
 interface InputTransformer {
     input?: (value: string) => string;
     output?: (value: string) => string;
@@ -3536,35 +3502,9 @@ declare const ConfirmDialog: {
 };
 
 interface GeckoUIPortalProps {
-    mermaidConfig?: MermaidConfig;
     toastOptions?: ToasterProps;
 }
 
-/**
- * GeckoUIPortal is a container component that wraps the Toast, ConfirmDialog, and other components that need to mount at the top level of the application.
- *
- * 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.
- * @example
- *
- * ```js
- * import { GeckoUIPortal } from '@geckoui/geckoui';
- *
- * renderApp(
- *  <>
- *   <App />
- *   <GeckoUIPortal
- *      toastOptions={{
- *        position: 'bottom-right',
- *        ... other options
- *      }},
- *      mermaidConfig={{
- *        startOnLoad: true,
- *      }}
- *   />
- *  </>
- * )
- * ```
- * */
 declare const GeckoUIPortal: FC<GeckoUIPortalProps>;
 
 /** Extensible placement map - To allow module augmentation */
@@ -3858,150 +3798,6 @@ declare namespace Dropdown {
     var displayName: string;
 }
 
-/**
- * MermaidDiagram renders diagrams from Mermaid syntax with automatic loading and error state management.
- * Supports flowcharts, sequence diagrams, class diagrams, and all other Mermaid diagram types.
- * Provides custom placeholder and error rendering options.
- *
- * @example
- * Flowchart for user workflow:
- *
- * ```tsx
- * <MermaidDiagram>
- *   {`
- *     flowchart LR
- *       Start[User Login] --> Auth{Authenticated?}
- *       Auth -->|Yes| Dashboard[Show Dashboard]
- *       Auth -->|No| Login[Login Page]
- *       Login --> Auth
- *   `}
- * </MermaidDiagram>
- * ```
- *
- * @example
- * Sequence diagram with custom loading:
- *
- * ```tsx
- * <MermaidDiagram
- *   placeholder={<div className="animate-pulse">Loading diagram...</div>}
- *   renderError={(props) => <ErrorBoundary message={props.message} />}
- * >
- *   {`
- *     sequenceDiagram
- *       participant Client
- *       participant API
- *       participant Database
- *       Client->>API: Request Data
- *       API->>Database: Query
- *       Database-->>API: Results
- *       API-->>Client: Response
- *   `}
- * </MermaidDiagram>
- * ```
- *
- * @example
- * Class diagram for documentation:
- *
- * ```tsx
- * <MermaidDiagram className="border rounded-lg p-4">
- *   {`
- *     classDiagram
- *       class User {
- *         +String email
- *         +String name
- *         +login()
- *         +logout()
- *       }
- *       class Admin {
- *         +manageUsers()
- *       }
- *       User <|-- Admin
- *   `}
- * </MermaidDiagram>
- * ```
- *
- * @see https://mermaid.js.org/ for diagram syntax reference
- */
-declare const MermaidDiagram: FC<MermaidDiagramProps>;
-
-interface MarkdownBaseProps<T extends keyof JSX.IntrinsicElements> extends UseMarkdownOptions {
-    /**
-     * HTML tag to render the markdown content.
-     * @default "div"
-     */
-    as?: T;
-    /**
-     * Placeholder component to show while async rendering is in progress.
-     * Will be ignored if async is false.
-     */
-    renderPlaceholder?: ReactNode | FC;
-    /**
-     * Error component to show when the markdown fails to render.
-     * If not provided, a simple error message will be shown.
-     */
-    renderError?: ReactNode | FC<{
-        message: string;
-    }>;
-    /**
-     * Markdown content to render.
-     */
-    children: string;
-}
-type InferredProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] & {
-    className?: string;
-};
-type MarkdownProps<T extends keyof JSX.IntrinsicElements = "div"> = MarkdownBaseProps<T> & Omit<InferredProps<T>, "children">;
-
-/**
- * Markdown renders formatted markdown text as HTML with support for both synchronous
- * and asynchronous rendering. Includes built-in loading states, error handling, and
- * HTML sanitization enabled by default for security.
- *
- * @example
- * Basic usage (synchronous rendering with sanitization enabled by default):
- *
- * ```tsx
- * <Markdown className="prose">{docs}</Markdown>
- * ```
- *
- * @example
- * Async rendering for large markdown content (not for network requests):
- *
- * ```tsx
- * const [largeContent, setLargeContent] = useState('');
- *
- * <Markdown
- *   async
- *   renderPlaceholder={<Spinner />}
- *   renderError={(props) => <Alert variant="error">{props.message}</Alert>}
- * >
- *   {largeContent}
- * </Markdown>
- * ```
- *
- * @example
- * Disabling HTML sanitization (⚠️ WARNING: Only use when you 100% trust the source):
- *
- * ```tsx
- * <Markdown sanitize={false} as="article">
- *   {trustedMarkdown}
- * </Markdown>
- * ```
- *
- * @example
- * Using with anchor tag and href prop:
- *
- * ```tsx
- * <Markdown as="a" href="https://example.com" target="_blank">
- *   {linkMarkdown}
- * </Markdown>
- * ```
- */
-declare function Markdown<T extends keyof JSX.IntrinsicElements = "div">({ children, renderError, renderPlaceholder, as, async, className, sanitize, ...props }: MarkdownProps<T>): react_jsx_runtime.JSX.Element;
-declare namespace Markdown {
-    var displayName: string;
-}
-
 type BaseIconProps = SVGProps<SVGSVGElement>;
 
 /**
@@ -4073,4 +3869,4 @@ declare class FileOnlyPickerHandler extends BaseFilePickerHandler {
 
 declare const FilePicker: typeof FileOnlyPickerHandler;
 
-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, 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, 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 };
+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 };