@sparrowengg/twigs-editor-react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,445 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LinkNode } from '@lexical/link';
+import { ListNode, ListItemNode } from '@lexical/list';
+import { InitialEditorStateType, InitialConfigType } from '@lexical/react/LexicalComposer';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { HeadingNode } from '@lexical/rich-text';
+import { CodeNode } from '@lexical/code';
+import { TextNode, LexicalEditor, NodeKey, Spread, SerializedEditor, SerializedLexicalNode, DecoratorNode, DOMExportOutput, DOMConversionMap, EditorConfig, LexicalNode, EditorState, SerializedTextNode } from 'lexical';
+import * as react from 'react';
+import react__default, { ReactPortal, ReactNode, RefObject, ComponentProps } from 'react';
+import { MenuTextMatch, MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { config, BoxProps, IconButtonProps, DropdownMenu, DropdownMenuTrigger, IconButton, DropdownMenuContent, DropdownMenuItem } from '@sparrowengg/twigs-react';
+import { CSS } from '@stitches/react';
+
+interface DataManagementPluginHandle {
+    getDataAsync: () => Promise<{
+        html: string;
+        json: Object;
+    }>;
+    setHtml: (html: string) => void;
+}
+interface DataManagementPluginProps {
+}
+declare const DataManagementPlugin: react.ForwardRefExoticComponent<DataManagementPluginProps & react.RefAttributes<DataManagementPluginHandle>>;
+
+type TypeaheadMenuData = {
+    value: string;
+    label: string;
+    [x: string]: unknown;
+};
+type RenderMenuItemContentProps = {
+    index: number;
+    isSelected: boolean;
+    option: TypeaheadOption;
+};
+declare class TypeaheadOption extends MenuOption {
+    data: TypeaheadMenuData;
+    constructor(data: TypeaheadMenuData);
+}
+type EditorLookupDropdownBaseProps = {
+    triggerFunction: (text: string) => MenuTextMatch | null;
+    getResults: (text: string | null) => Promise<TypeaheadMenuData[]> | TypeaheadMenuData[];
+    $createNode?: (data: TypeaheadOption) => TextNode;
+    suggestionsListLength?: number;
+    renderMenu?: (args: {
+        anchorElementRef: react__default.MutableRefObject<HTMLElement | null>;
+        selectedIndex: number | null;
+        selectOptionAndCleanUp: (option: TypeaheadOption) => void;
+        setHighlightedIndex: (index: number) => void;
+        menuOptions: TypeaheadOption[];
+    }) => ReactPortal | react__default.JSX.Element | null;
+    renderMenuItemContent?: (props: RenderMenuItemContentProps) => ReactNode;
+    onMenuItemSelect?: (option: TypeaheadOption, closeMenu?: () => void) => void | boolean;
+    css?: CSS<typeof config>;
+};
+declare const EditorLookupDropdownBase: ({ triggerFunction, getResults, $createNode, renderMenu, onMenuItemSelect, renderMenuItemContent, suggestionsListLength, css }: EditorLookupDropdownBaseProps) => react_jsx_runtime.JSX.Element;
+
+type DefaultToolbarTools = 'format' | 'bold' | 'italic' | 'underline' | 'ordered-list' | 'unordered-list' | 'link' | 'codeblock' | 'code' | 'text-align';
+type CustomTool$1 = {
+    renderComponent: (props: {
+        editor: LexicalEditor;
+    }) => ReactNode;
+};
+type ToolbarTools = (DefaultToolbarTools | CustomTool$1)[];
+declare const EditorToolbar: ({ tools, children }: {
+    tools?: ToolbarTools;
+    children?: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+type DefaultFloatingToolbarTools = Extract<DefaultToolbarTools, 'bold' | 'italic' | 'underline' | 'link' | 'strikethrough' | 'subscript' | 'superscript'>;
+type ToolProps = {
+    editor: LexicalEditor;
+};
+type CustomTool = {
+    renderComponent: (props: ToolProps) => ReactNode;
+};
+type FloatingToolbarTools = (DefaultFloatingToolbarTools | CustomTool)[];
+type FloatingToolbarProperties = {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isLink: boolean;
+    isStrikethrough: boolean;
+    isSubscript: boolean;
+    isSuperscript: boolean;
+};
+declare const EditorFloatingToolbar: ({ anchorElem, tools, children, containerProps }: {
+    anchorElem?: HTMLElement;
+    tools?: (DefaultFloatingToolbarTools | CustomTool)[];
+    children?: ReactNode;
+    containerProps?: BoxProps;
+}) => react__default.ReactPortal | null;
+
+type DialogLinkEditorOptions = {
+    dialogProps?: {
+        textLabel?: string;
+        urlLabel?: string;
+        saveLabel?: string;
+        cancelLabel?: string;
+        updateLabel?: string;
+        title?: string;
+        errorLabels?: {
+            text?: string;
+            url?: string;
+        };
+    };
+    anchorOptions?: {
+        rel?: string;
+        target?: string;
+        title?: string;
+        https?: boolean;
+    };
+};
+declare function DialogLinkEditor({ anchorElem, options }: {
+    anchorElem?: HTMLElement | null;
+    options?: DialogLinkEditorOptions;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare const RichEditor: ({ containerRef, placeholder, editorContainerProps }: {
+    containerRef?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>;
+    placeholder?: ReactNode | string;
+    editorContainerProps?: BoxProps;
+}) => react_jsx_runtime.JSX.Element;
+
+type RenderButtonProps = {
+    editor: LexicalEditor;
+    active: boolean;
+    onChange?: () => void;
+};
+type ToolbarButtonProps = {
+    renderButton?: (props: RenderButtonProps) => ReactNode;
+    buttonProps?: IconButtonProps;
+};
+
+declare const BoldTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const CodeTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const CodeBlockTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const ItalicTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const LinkTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const OrderedListTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const UnderlineTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const UnorderedListTool: ({ renderButton, buttonProps }: ToolbarButtonProps) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+type TextFormats = 'paragraph' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code';
+declare const textAlignments: readonly ["left", "center", "right", "justify"];
+type TextAlignments = (typeof textAlignments)[number];
+type ToolbarProperties = {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isOrderedList: boolean;
+    isUnOrderedList: boolean;
+    isLink: boolean;
+    isStrikethrough: boolean;
+    isSubscript: boolean;
+    isSuperscript: boolean;
+    isCode: boolean;
+    format: TextFormats;
+    textAlign: TextAlignments;
+};
+
+declare const formatMapping: {
+    readonly paragraph: "Paragraph";
+    readonly h1: "Heading 1";
+    readonly h2: "Heading 2";
+    readonly h3: "Heading 3";
+    readonly h4: "Heading 4";
+    readonly h5: "Heading 5";
+    readonly h6: "Heading 6";
+};
+type FormatToolProps = Omit<ToolbarButtonProps, 'renderButton'> & {
+    renderButton?: (props: Omit<RenderButtonProps, 'onChange' | 'active'> & {
+        onChange: (type: keyof typeof formatMapping) => void;
+        active: TextFormats;
+    }) => react__default.ReactNode;
+    dropdownMenuProps?: Partial<ComponentProps<typeof DropdownMenu>>;
+    dropdownMenuTriggerProps?: Partial<ComponentProps<typeof DropdownMenuTrigger>>;
+    dropdownMenuTriggerButtonProps?: Partial<ComponentProps<typeof IconButton>>;
+    dropdownMenuContentProps?: Partial<ComponentProps<typeof DropdownMenuContent>>;
+    dropdownMenuItemProps?: Partial<ComponentProps<typeof DropdownMenuItem>> | ((args: {
+        type: keyof typeof formatMapping;
+        formatText: (formatType: keyof typeof formatMapping) => void;
+    }) => Partial<ComponentProps<typeof DropdownMenuItem>>);
+    renderDropdownTrigger?: () => react__default.ReactNode;
+};
+declare const FormatTool: ({ renderButton, dropdownMenuProps, dropdownMenuContentProps, dropdownMenuItemProps, dropdownMenuTriggerProps, dropdownMenuTriggerButtonProps, renderDropdownTrigger }: FormatToolProps) => string | number | boolean | Iterable<react__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const TextAlignTool: ({ renderButton, buttonProps }: Omit<ToolbarButtonProps, "renderButton"> & {
+    renderButton?: (props: Omit<RenderButtonProps, "onChange" | "active"> & {
+        onChange: (alignment: TextAlignments) => void;
+        active: TextAlignments;
+    }) => react__default.ReactNode;
+}) => string | number | boolean | Iterable<react__default.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare const ToolbarContextPlugin: ({ children }: {
+    children?: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare const ToolbarContextConsumer: ({ children }: {
+    children?: ReactNode;
+}) => ReactNode;
+
+interface ToolbarStore {
+    data: ToolbarProperties;
+}
+declare const useToolbarStore: <T>(selector: (state: ToolbarStore) => T) => readonly [T, (value: any) => void];
+declare const ToolbarStoreProvider: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const HashTagPlugin: ({ getResults, triggerStringLength, ...props }: Partial<EditorLookupDropdownBaseProps> & {
+    getResults: (text: string | null) => TypeaheadMenuData[] | Promise<TypeaheadMenuData[]>;
+    triggerStringLength?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+interface ImagePayload {
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    captionsEnabled?: boolean;
+}
+type SerializedImageNode = Spread<{
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+}, SerializedLexicalNode>;
+declare class ImageNode extends DecoratorNode<react__default.JSX.Element> {
+    __src: string;
+    __altText: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __captionsEnabled: boolean;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    setShowCaption(showCaption: boolean): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    decorate(): react__default.JSX.Element;
+}
+declare function $createImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key }: ImagePayload): ImageNode;
+declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+
+type InsertImagePayload = Readonly<ImagePayload>;
+declare const ImagesPlugin: ({ captionsEnabled }: {
+    captionsEnabled?: boolean;
+}) => null;
+declare global {
+    interface DragEvent {
+        rangeOffset?: number;
+        rangeParent?: Node;
+    }
+}
+
+declare const AutoLinkPlugin: () => react_jsx_runtime.JSX.Element;
+
+type Props = {
+    validateUrl?: (url: string) => boolean;
+};
+declare const LinkPlugin: ({ validateUrl }: Props) => null;
+
+declare const ConvertSelectionToLinkOnPastePlugin: () => null;
+
+declare const MentionsPlugin: ({ getResults, triggerStringLength, ...props }: Partial<EditorLookupDropdownBaseProps> & {
+    getResults: (text: string | null) => TypeaheadMenuData[] | Promise<TypeaheadMenuData[]>;
+    triggerStringLength?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+declare const TabFocusPlugin: () => null;
+
+type Emoji = {
+    emoji: string;
+    description: string;
+    category: string;
+    aliases: string[];
+    tags: string[];
+    unicode_version: string;
+    ios_version: string;
+    skin_tones?: boolean;
+};
+declare const EmojiPlugin: ({ getResults, triggerStringLength, suggestionsListLength, ...props }: Partial<EditorLookupDropdownBaseProps> & {
+    getResults?: (text: string | null, defaultEmojis?: Emoji[]) => TypeaheadMenuData[] | Promise<TypeaheadMenuData[]>;
+    triggerStringLength?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const featuresToNodeMapping: {
+    heading: {
+        node: typeof HeadingNode;
+        component: null;
+    };
+    list: {
+        node: (typeof ListNode | typeof ListItemNode)[];
+        component: typeof ListPlugin;
+    };
+    link: {
+        node: (typeof LinkNode)[];
+        component: ((() => react_jsx_runtime.JSX.Element) | (({ validateUrl }: {
+            validateUrl?: (url: string) => boolean;
+        }) => null))[];
+    };
+    code: {
+        node: (typeof CodeNode)[];
+        component: null;
+    };
+};
+declare const Editor: ({ nodes, onChange, editable, features, children, initialEditorState, dataManagementRef }: {
+    initialEditorState?: InitialEditorStateType;
+    onChange?: (newEditorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void;
+    editable?: boolean;
+    children?: ReactNode;
+    nodes?: InitialConfigType["nodes"];
+    features?: (keyof typeof featuresToNodeMapping)[];
+    dataManagementRef?: RefObject<DataManagementPluginHandle>;
+}) => react_jsx_runtime.JSX.Element;
+
+type SerializedHashTagNode = Spread<{
+    hashTagName: string;
+}, SerializedTextNode>;
+declare class HashTagNode extends TextNode {
+    __hashTag: string;
+    static getType(): string;
+    static clone(node: HashTagNode): HashTagNode;
+    static importJSON(serializedNode: SerializedHashTagNode): HashTagNode;
+    constructor(hashTagName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedHashTagNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+declare function $createHashTagNode(hashTagName: string): HashTagNode;
+declare function $isHashTagNode(node: LexicalNode | null | undefined): node is HashTagNode;
+
+type SerializedKudosNode = Spread<{
+    kudos: string;
+}, SerializedTextNode>;
+declare class KudosNode extends TextNode {
+    __kudos: string;
+    static getType(): string;
+    static clone(node: KudosNode): KudosNode;
+    static importJSON(serializedNode: SerializedKudosNode): KudosNode;
+    constructor(kudosName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedKudosNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+declare function $createKudosNode(kudosName: string): KudosNode;
+declare function $isKudosNode(node: LexicalNode | null | undefined): node is KudosNode;
+
+type SerializedMentionNode = Spread<{
+    mentionName: string;
+}, SerializedTextNode>;
+declare class MentionNode extends TextNode {
+    __mention: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    constructor(mentionName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedMentionNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+declare function $createMentionNode(mentionName: string): MentionNode;
+declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
+
+type SerializedVariableNode = Spread<{
+    variableName: string;
+}, SerializedTextNode>;
+declare class VariableNode extends TextNode {
+    __variable: string;
+    static getType(): string;
+    static clone(node: VariableNode): VariableNode;
+    static importJSON(serializedNode: SerializedVariableNode): VariableNode;
+    constructor(variableName: string, text?: string, key?: NodeKey);
+    exportJSON(): SerializedVariableNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    isTextEntity(): true;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+}
+declare function $createVariableNode(variableName: string): VariableNode;
+declare function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode;
+
+type SerializedEmojiNode = Spread<{
+    className: string;
+}, SerializedTextNode>;
+declare class EmojiNode extends TextNode {
+    __className: string;
+    static getType(): string;
+    static clone(node: EmojiNode): EmojiNode;
+    constructor(className: string, text: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: TextNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importJSON(serializedNode: SerializedEmojiNode): EmojiNode;
+    exportJSON(): SerializedEmojiNode;
+    getClassName(): string;
+}
+declare function $isEmojiNode(node: LexicalNode | null | undefined): node is EmojiNode;
+declare function $createEmojiNode(className: string, emojiText: string): EmojiNode;
+
+export { $createEmojiNode, $createHashTagNode, $createImageNode, $createKudosNode, $createMentionNode, $createVariableNode, $isEmojiNode, $isHashTagNode, $isImageNode, $isKudosNode, $isMentionNode, $isVariableNode, AutoLinkPlugin, BoldTool, CodeBlockTool, CodeTool, ConvertSelectionToLinkOnPastePlugin, DataManagementPlugin, type DataManagementPluginHandle, type DefaultToolbarTools, DialogLinkEditor, type DialogLinkEditorOptions, Editor, EditorFloatingToolbar, EditorLookupDropdownBase, type EditorLookupDropdownBaseProps, EditorToolbar, EmojiNode, EmojiPlugin, type FloatingToolbarProperties, type FloatingToolbarTools, FormatTool, type FormatToolProps, HashTagNode, HashTagPlugin, ImageNode, type ImagePayload, ImagesPlugin, type InsertImagePayload, ItalicTool, KudosNode, LinkPlugin, LinkTool, MentionNode, MentionsPlugin, OrderedListTool, RichEditor, type SerializedEmojiNode, type SerializedHashTagNode, type SerializedImageNode, type SerializedKudosNode, type SerializedMentionNode, type SerializedVariableNode, TabFocusPlugin, TextAlignTool, ToolbarContextConsumer, ToolbarContextPlugin, ToolbarStoreProvider, type ToolbarTools, type TypeaheadMenuData, UnderlineTool, UnorderedListTool, VariableNode, useToolbarStore };

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@sparrowengg/twigs-editor-react",
+  "version": "0.0.1",
+  "description": "Rich text editor built on top of Lexical",
+  "module": "dist/es/index.js",
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "/dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "test": "vitest",
+    "eslint": "eslint . --ext .ts,.tsx",
+    "eslint:fix": "eslint . --ext .ts,.tsx --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rimraf dist && rollup -c",
+    "dev": "rimraf dist && rollup -c rollup.config.dev.cjs --watch",
+    "publish-pkg-pr-new": "pkg-pr-new publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:surveysparrow/twigs.git"
+  },
+  "auto-changelog": {
+    "output": "CHANGELOG.md",
+    "template": "keepachangelog",
+    "unreleased": true,
+    "commitLimit": false
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "ui",
+    "design-system",
+    "accessible"
+  ],
+  "author": "",
+  "license": "MIT",
+  "homepage": "https://twigs.surveysparrow.com",
+  "peerDependencies": {
+    "@lexical/code": ">=0.27.2",
+    "@lexical/html": ">=0.27.2",
+    "@lexical/link": ">=0.27.2",
+    "@lexical/list": ">=0.27.2",
+    "@lexical/react": ">=0.27.2",
+    "@lexical/rich-text": ">=0.27.2",
+    "@lexical/selection": ">=0.27.2",
+    "@lexical/utils": ">=0.27.2",
+    "lexical": ">=0.27.2",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@lexical/code": "^0.27.2",
+    "@lexical/html": "^0.27.2",
+    "@lexical/link": "^0.27.2",
+    "@lexical/list": "^0.27.2",
+    "@lexical/react": "^0.27.2",
+    "@lexical/rich-text": "^0.27.2",
+    "@lexical/selection": "^0.27.2",
+    "@lexical/utils": "^0.27.2",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@sparrowengg/twigs-react": "*",
+    "@sparrowengg/twigs-react-icons": "*",
+    "@stitches/react": "^1.2.8",
+    "@storybook/addon-a11y": "^7.0.8",
+    "@storybook/addon-actions": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-interactions": "^7.0.8",
+    "@storybook/addon-links": "^7.0.8",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-webpack5": "^7.0.8",
+    "@storybook/testing-library": "0.1.0",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^19.0.0",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@types/validator": "^13.12.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "3.0.8",
+    "babel-loader": "^8.2.5",
+    "esbuild": "^0.25.1",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lexical": "^0.27.2",
+    "pkg-pr-new": "^0.0.24",
+    "playwright": "^1.51.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^4.35.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-pure": "^0.3.0",
+    "storybook": "^7.0.8",
+    "ts-jest": "^29.2.6",
+    "typescript": "^5.8.2",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.8",
+    "vitest-browser-react": "^0.1.1"
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "validator": "^13.12.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": [
+        "lint-staged"
+      ]
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss}": [
+      "prettier --write"
+    ],
+    "src/**/*.{js,ts,jsx,tsx}": [
+      "eslint --fix"
+    ]
+  }
+}