@6thbridge/hexa 0.0.0-pr50-60 → 0.0.0-pr51-61

package/dist/index.d.mts

@@ -15,6 +15,7 @@ import { RowData, Row, Table as Table$1 } from '@tanstack/react-table';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as zustand from 'zustand';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { Extension } from '@tiptap/react';
 import dayjs from 'dayjs';
 import { ClassValue } from 'clsx';
 
@@ -662,6 +663,90 @@ type TabsProps = {
 };
 declare function Tabs({ tabs, defaultValue, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
 
+type EditorControl = "bold" | "italic" | "underline" | "strike" | "heading1" | "bulletList" | "orderedList" | "blockquote" | "textStyle" | "link";
+
+type RichTextEditorProps = {
+    label?: string;
+    helpText?: string;
+    error?: string;
+    value?: string;
+    onChange?: (html: string) => void;
+    optional?: boolean;
+    isRequired?: boolean;
+    extensions?: Extension[];
+    editorClassName?: string;
+    wrapperClassName?: string;
+    controls?: EditorControl[];
+    extraMenuNodes?: React.ReactNode;
+};
+/**
+ * @component RichTextEditor
+ * @description
+ * The `RichTextEditor` component is a customizable rich text input built on top of Tiptap and styled with Tailwind CSS.
+ * It provides a toolbar for formatting text (bold, italic, underline, strikethrough, headings, lists, blockquote, links).
+ *
+ * ## Props
+ * - `label?: string` - Label for the editor.
+ * - `helpText?: string` - Optional help text displayed below the editor.
+ * - `error?: string` - Error message displayed below the editor.
+ * - `value?: string` - The HTML content of the editor.
+ * - `onChange?: (html: string) => void` - Callback fired when the content changes.
+ * - `optional?: boolean` - If true, displays "Optional" next to the label.
+ * - `isRequired?: boolean` - If true, displays a red asterisk next to the label.
+ * - `extensions?: Extension[]` - Additional Tiptap extensions to include.
+ * - `editorClassName?: string` - Custom class for the editor content area.
+ * - `wrapperClassName?: string` - Custom class for the editor wrapper.
+ * - `controls?: EditorControl[]` - Array of controls to show in the toolbar.
+ * - `extraMenuNodes?: React.ReactNode` - Extra nodes to render in the toolbar.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import React, { useState } from "react";
+ * import { RichTextEditor } from "@6thbridge/hexa";
+ *
+ * export const RichTextEditorDemo = () => {
+ *   const [value, setValue] = useState("<p>Hello <strong>world</strong>!</p>");
+ *
+ *   return (
+ *     <div className="max-w-xl mx-auto mt-8">
+ *       <RichTextEditor
+ *         label="Description"
+ *         helpText="You can format your text using the toolbar above."
+ *         value={value}
+ *         onChange={setValue}
+ *         optional
+ *         isRequired
+ *         // You can customize controls, add extensions, etc.
+ *         // controls={["textStyle", "bold", "italic", "underline", "strike", "link", "bulletList", "orderedList", "blockquote"]}
+ *       />
+ *       <div className="mt-6">
+ *         <h2 className="text-lg font-semibold mb-2">Editor Output (HTML):</h2>
+ *         <pre className="bg-gray-100 p-4 rounded text-xs overflow-x-auto">{value}</pre>
+ *       </div>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * ## Output
+ *
+ * The editor renders a toolbar with formatting buttons (bold, italic, underline, strikethrough, headings, bullet list, ordered list, blockquote, link).
+ * The content area allows rich text editing. The output is HTML, which is returned via the `onChange` callback and can be displayed or stored as needed.
+ *
+ * Example output:
+ *
+ * ```html
+ * <p>This is <strong>bold</strong>, <em>italic</em>, <u>underlined</u>, <s>strikethrough</s>, and a <blockquote>blockquote</blockquote>.</p>
+ * <ul>
+ *   <li>Bullet item 1</li>
+ *   <li>Bullet item 2</li>
+ * </ul>
+ * <a href="https://example.com">A link</a>
+ * ```
+ */
+declare const RichTextEditor: ({ label, helpText, error, value, onChange, optional, isRequired, extensions, editorClassName, wrapperClassName, controls, extraMenuNodes, }: RichTextEditorProps) => react_jsx_runtime.JSX.Element | null;
+
 declare const CurrencySymbolMap: Record<string, string>;
 interface FormatCurrencyOptions {
     convertToMajorCurrency?: boolean;
@@ -683,4 +768,4 @@ declare class DateAction {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AmountAction, Banner, Button, CalendarInput, CopyableLabel, Country, CurrencySymbolMap, DateAction, DebouncedInput, DevBanner, Dialog, Drawer, DrawerClose, type DrawerPropsType, DrawerRoot, type FilterListItem, type FilterListOptions, FilterPopover, FlagComponent, FormLabel, type FormatCurrencyOptions, HasResourcePermission, Input, Loader, LocaleSelector, MultiSelect, type MultiSelectDataType, MultiSelectTrigger, OTPInput, PageDataToolbar, Pagination, PasswordInput, PermissionsContext, PermissionsProvider, PhoneInput, Popover, PopoverContent, PopoverRoot, PopoverTrigger, RadioGroup, RadioGroupItem, type ResourcePermission, type ResourcePermissionProps, type ResourcePermissions, ScrollArea, Select, Sidebar, Status, Table, type TableBulkRowActionsProps, type TablePaginationProps, Tabs, TextOverflow, type TextOverflowProps, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, buttonVariants, cn, useFilterStore, useHasPermission, usePermissions };
+export { AmountAction, Banner, Button, CalendarInput, CopyableLabel, Country, CurrencySymbolMap, DateAction, DebouncedInput, DevBanner, Dialog, Drawer, DrawerClose, type DrawerPropsType, DrawerRoot, type FilterListItem, type FilterListOptions, FilterPopover, FlagComponent, FormLabel, type FormatCurrencyOptions, HasResourcePermission, Input, Loader, LocaleSelector, MultiSelect, type MultiSelectDataType, MultiSelectTrigger, OTPInput, PageDataToolbar, Pagination, PasswordInput, PermissionsContext, PermissionsProvider, PhoneInput, Popover, PopoverContent, PopoverRoot, PopoverTrigger, RadioGroup, RadioGroupItem, type ResourcePermission, type ResourcePermissionProps, type ResourcePermissions, RichTextEditor, ScrollArea, Select, Sidebar, Status, Table, type TableBulkRowActionsProps, type TablePaginationProps, Tabs, TextOverflow, type TextOverflowProps, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, buttonVariants, cn, useFilterStore, useHasPermission, usePermissions };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import { RowData, Row, Table as Table$1 } from '@tanstack/react-table';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as zustand from 'zustand';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { Extension } from '@tiptap/react';
 import dayjs from 'dayjs';
 import { ClassValue } from 'clsx';
 
@@ -662,6 +663,90 @@ type TabsProps = {
 };
 declare function Tabs({ tabs, defaultValue, onChange }: TabsProps): react_jsx_runtime.JSX.Element;
 
+type EditorControl = "bold" | "italic" | "underline" | "strike" | "heading1" | "bulletList" | "orderedList" | "blockquote" | "textStyle" | "link";
+
+type RichTextEditorProps = {
+    label?: string;
+    helpText?: string;
+    error?: string;
+    value?: string;
+    onChange?: (html: string) => void;
+    optional?: boolean;
+    isRequired?: boolean;
+    extensions?: Extension[];
+    editorClassName?: string;
+    wrapperClassName?: string;
+    controls?: EditorControl[];
+    extraMenuNodes?: React.ReactNode;
+};
+/**
+ * @component RichTextEditor
+ * @description
+ * The `RichTextEditor` component is a customizable rich text input built on top of Tiptap and styled with Tailwind CSS.
+ * It provides a toolbar for formatting text (bold, italic, underline, strikethrough, headings, lists, blockquote, links).
+ *
+ * ## Props
+ * - `label?: string` - Label for the editor.
+ * - `helpText?: string` - Optional help text displayed below the editor.
+ * - `error?: string` - Error message displayed below the editor.
+ * - `value?: string` - The HTML content of the editor.
+ * - `onChange?: (html: string) => void` - Callback fired when the content changes.
+ * - `optional?: boolean` - If true, displays "Optional" next to the label.
+ * - `isRequired?: boolean` - If true, displays a red asterisk next to the label.
+ * - `extensions?: Extension[]` - Additional Tiptap extensions to include.
+ * - `editorClassName?: string` - Custom class for the editor content area.
+ * - `wrapperClassName?: string` - Custom class for the editor wrapper.
+ * - `controls?: EditorControl[]` - Array of controls to show in the toolbar.
+ * - `extraMenuNodes?: React.ReactNode` - Extra nodes to render in the toolbar.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import React, { useState } from "react";
+ * import { RichTextEditor } from "@6thbridge/hexa";
+ *
+ * export const RichTextEditorDemo = () => {
+ *   const [value, setValue] = useState("<p>Hello <strong>world</strong>!</p>");
+ *
+ *   return (
+ *     <div className="max-w-xl mx-auto mt-8">
+ *       <RichTextEditor
+ *         label="Description"
+ *         helpText="You can format your text using the toolbar above."
+ *         value={value}
+ *         onChange={setValue}
+ *         optional
+ *         isRequired
+ *         // You can customize controls, add extensions, etc.
+ *         // controls={["textStyle", "bold", "italic", "underline", "strike", "link", "bulletList", "orderedList", "blockquote"]}
+ *       />
+ *       <div className="mt-6">
+ *         <h2 className="text-lg font-semibold mb-2">Editor Output (HTML):</h2>
+ *         <pre className="bg-gray-100 p-4 rounded text-xs overflow-x-auto">{value}</pre>
+ *       </div>
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * ## Output
+ *
+ * The editor renders a toolbar with formatting buttons (bold, italic, underline, strikethrough, headings, bullet list, ordered list, blockquote, link).
+ * The content area allows rich text editing. The output is HTML, which is returned via the `onChange` callback and can be displayed or stored as needed.
+ *
+ * Example output:
+ *
+ * ```html
+ * <p>This is <strong>bold</strong>, <em>italic</em>, <u>underlined</u>, <s>strikethrough</s>, and a <blockquote>blockquote</blockquote>.</p>
+ * <ul>
+ *   <li>Bullet item 1</li>
+ *   <li>Bullet item 2</li>
+ * </ul>
+ * <a href="https://example.com">A link</a>
+ * ```
+ */
+declare const RichTextEditor: ({ label, helpText, error, value, onChange, optional, isRequired, extensions, editorClassName, wrapperClassName, controls, extraMenuNodes, }: RichTextEditorProps) => react_jsx_runtime.JSX.Element | null;
+
 declare const CurrencySymbolMap: Record<string, string>;
 interface FormatCurrencyOptions {
     convertToMajorCurrency?: boolean;
@@ -683,4 +768,4 @@ declare class DateAction {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AmountAction, Banner, Button, CalendarInput, CopyableLabel, Country, CurrencySymbolMap, DateAction, DebouncedInput, DevBanner, Dialog, Drawer, DrawerClose, type DrawerPropsType, DrawerRoot, type FilterListItem, type FilterListOptions, FilterPopover, FlagComponent, FormLabel, type FormatCurrencyOptions, HasResourcePermission, Input, Loader, LocaleSelector, MultiSelect, type MultiSelectDataType, MultiSelectTrigger, OTPInput, PageDataToolbar, Pagination, PasswordInput, PermissionsContext, PermissionsProvider, PhoneInput, Popover, PopoverContent, PopoverRoot, PopoverTrigger, RadioGroup, RadioGroupItem, type ResourcePermission, type ResourcePermissionProps, type ResourcePermissions, ScrollArea, Select, Sidebar, Status, Table, type TableBulkRowActionsProps, type TablePaginationProps, Tabs, TextOverflow, type TextOverflowProps, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, buttonVariants, cn, useFilterStore, useHasPermission, usePermissions };
+export { AmountAction, Banner, Button, CalendarInput, CopyableLabel, Country, CurrencySymbolMap, DateAction, DebouncedInput, DevBanner, Dialog, Drawer, DrawerClose, type DrawerPropsType, DrawerRoot, type FilterListItem, type FilterListOptions, FilterPopover, FlagComponent, FormLabel, type FormatCurrencyOptions, HasResourcePermission, Input, Loader, LocaleSelector, MultiSelect, type MultiSelectDataType, MultiSelectTrigger, OTPInput, PageDataToolbar, Pagination, PasswordInput, PermissionsContext, PermissionsProvider, PhoneInput, Popover, PopoverContent, PopoverRoot, PopoverTrigger, RadioGroup, RadioGroupItem, type ResourcePermission, type ResourcePermissionProps, type ResourcePermissions, RichTextEditor, ScrollArea, Select, Sidebar, Status, Table, type TableBulkRowActionsProps, type TablePaginationProps, Tabs, TextOverflow, type TextOverflowProps, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, buttonVariants, cn, useFilterStore, useHasPermission, usePermissions };