blumbaben 1.0.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Ragaeeb Haq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,452 @@
+# blumbaben
+
+A lightweight TypeScript React hook library for adding formatting toolbars to text inputs and textareas. Show contextual formatting options when users focus on input fields.
+
+[![wakatime](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da.svg)](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da)
+![Bun](https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white)
+[![Node.js CI](https://github.com/ragaeeb/blumbaben/actions/workflows/build.yml/badge.svg)](https://github.com/ragaeeb/blumbaben/actions/workflows/build.yml)
+![GitHub License](https://img.shields.io/github/license/ragaeeb/blumbaben)
+![GitHub Release](https://img.shields.io/github/v/release/ragaeeb/blumbaben)
+[![Size](https://deno.bundlejs.com/badge?q=blumbaben@latest&badge=detailed)](https://bundlejs.com/?q=blumbaben%40latest)
+![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label&color=blue)
+![npm](https://img.shields.io/npm/dm/blumbaben)
+![GitHub issues](https://img.shields.io/github/issues/ragaeeb/blumbaben)
+![GitHub stars](https://img.shields.io/github/stars/ragaeeb/blumbaben?style=social)
+[![npm version](https://badge.fury.io/js/blumbaben.svg)](https://badge.fury.io/js/blumbaben)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- **🎯 Global State Management** - Single toolbar instance shared across all inputs
+- **📱 Smart Positioning** - Automatic toolbar positioning with customizable placement
+- **🎨 Flexible Styling** - Bring your own UI components and styles
+- **⚡ TypeScript Support** - Full type safety and excellent DX
+- **🪶 Lightweight** - Minimal bundle size with no external dependencies
+- **🔧 Configurable** - Customizable behavior and positioning
+- **♿ Accessible** - Built with accessibility in mind
+
+## 📦 Installation
+
+```bash
+npm install blumbaben
+```
+
+```bash
+bun add blumbaben
+```
+
+```bash
+pnpm add blumbaben
+```
+
+## 🚀 Quick Start
+
+### Basic Usage with Hook
+
+```tsx
+import React, { useState } from 'react';
+import { useFormattingToolbar } from 'blumbaben';
+
+function MyComponent() {
+    const [content, setContent] = useState('');
+    const { getInputProps, isVisible, applyFormat } = useFormattingToolbar();
+
+    return (
+        <div>
+            <textarea
+                {...getInputProps()}
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="Focus me to see the toolbar!"
+            />
+
+            {isVisible && (
+                <div className="toolbar">
+                    <button onClick={() => applyFormat((text) => text.toUpperCase())}>UPPERCASE</button>
+                    <button onClick={() => applyFormat((text) => `**${text}**`)}>Bold</button>
+                </div>
+            )}
+        </div>
+    );
+}
+```
+
+### Using the FormattingToolbar Component
+
+```tsx
+import React, { useState } from 'react';
+import { useFormattingToolbar, FormattingToolbar } from 'blumbaben';
+
+function MyComponent() {
+    const [content, setContent] = useState('');
+    const { getInputProps } = useFormattingToolbar();
+
+    return (
+        <div>
+            <textarea
+                {...getInputProps()}
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="Focus me to see the toolbar!"
+            />
+
+            <FormattingToolbar>
+                {(applyFormat) => (
+                    <div className="flex gap-2 p-2 bg-white border rounded shadow">
+                        <button
+                            onClick={() => applyFormat((text) => text.toUpperCase())}
+                            className="px-2 py-1 bg-blue-500 text-white rounded"
+                        >
+                            UPPERCASE
+                        </button>
+                        <button
+                            onClick={() => applyFormat((text) => `**${text}**`)}
+                            className="px-2 py-1 bg-green-500 text-white rounded"
+                        >
+                            Bold
+                        </button>
+                        <button
+                            onClick={() => applyFormat((text) => text.replace(/\n/g, ' '))}
+                            className="px-2 py-1 bg-red-500 text-white rounded"
+                        >
+                            Remove Line Breaks
+                        </button>
+                    </div>
+                )}
+            </FormattingToolbar>
+        </div>
+    );
+}
+```
+
+### Using the Higher-Order Component
+
+```tsx
+import React, { useState } from 'react';
+import { withFormattingToolbar, FormattingToolbar } from 'blumbaben';
+
+// Enhance your existing textarea component
+const MyTextarea = ({ value, onChange, ...props }) => <textarea value={value} onChange={onChange} {...props} />;
+
+const TextareaWithToolbar = withFormattingToolbar(MyTextarea);
+
+function App() {
+    const [content, setContent] = useState('');
+
+    return (
+        <div>
+            <TextareaWithToolbar
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="Focus me to see the toolbar!"
+            />
+
+            <FormattingToolbar>
+                {(applyFormat) => (
+                    <div className="toolbar-buttons">
+                        <button onClick={() => applyFormat((text) => text.toUpperCase())}>UPPERCASE</button>
+                        <button onClick={() => applyFormat((text) => text.toLowerCase())}>lowercase</button>
+                    </div>
+                )}
+            </FormattingToolbar>
+        </div>
+    );
+}
+```
+
+## 🔧 Configuration
+
+### Toolbar Configuration Options
+
+```tsx
+interface ToolbarConfig {
+    // Custom positioning function
+    getPosition?: (element: TextInputElement) => ToolbarPosition;
+
+    // Delay before hiding toolbar after blur (ms)
+    hideDelay?: number; // default: 500
+
+    // Prevent toolbar from closing when clicked
+    preventCloseOnClick?: boolean; // default: true
+}
+```
+
+### Custom Positioning
+
+```tsx
+const { getInputProps, isVisible, applyFormat } = useFormattingToolbar({
+    getPosition: (element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top - 50, // Position above the element
+        };
+    },
+    hideDelay: 300,
+    preventCloseOnClick: true,
+});
+```
+
+### Styling the Toolbar
+
+```tsx
+<FormattingToolbar
+  className="my-custom-toolbar"
+  style={{
+    backgroundColor: 'white',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    padding: '8px'
+  }}
+>
+  {(applyFormat) => (
+    // Your toolbar content
+  )}
+</FormattingToolbar>
+```
+
+## 📚 API Reference
+
+### Hooks
+
+#### `useFormattingToolbar(config?: ToolbarConfig)`
+
+Main hook for managing toolbar functionality.
+
+**Returns:**
+
+- `getInputProps()` - Props to spread on input/textarea elements
+- `getToolbarProps()` - Props for toolbar container (includes positioning)
+- `applyFormat(formatter)` - Apply formatting to active element
+- `showToolbar(element)` - Manually show toolbar
+- `hideToolbar()` - Manually hide toolbar
+- `isVisible` - Whether toolbar is visible
+- `toolbarState` - Current toolbar state
+
+#### `useFormattingToolbarState()`
+
+Lightweight hook for toolbar-only components that don't handle input events.
+
+**Returns:**
+
+- `applyFormat(formatter)` - Apply formatting to active element
+- `isVisible` - Whether toolbar is visible
+- `toolbarState` - Current toolbar state
+
+### Components
+
+#### `FormattingToolbar`
+
+Renders the toolbar when an input is focused.
+
+**Props:**
+
+- `children` - Render function receiving `applyFormat` callback
+- `as?` - Container element type (default: 'div')
+- `className?` - CSS class name
+- `config?` - Toolbar configuration
+- `style?` - Inline styles
+
+#### `withFormattingToolbar(Component, config?)`
+
+Higher-order component that adds toolbar functionality to input components.
+
+### Types
+
+```tsx
+type FormatterFunction = (text: string) => string;
+
+type TextInputElement = HTMLInputElement | HTMLTextAreaElement;
+
+type ToolbarPosition = {
+    x: number;
+    y: number;
+};
+
+type ToolbarState = {
+    activeElement: TextInputElement | null;
+    isVisible: boolean;
+    position: ToolbarPosition | null;
+};
+```
+
+## 💡 Common Formatting Functions
+
+Here are some useful formatting functions you can use:
+
+```tsx
+// Text transformations
+const toUpperCase = (text: string) => text.toUpperCase();
+const toLowerCase = (text: string) => text.toLowerCase();
+const toTitleCase = (text: string) =>
+    text.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+
+// Markdown formatting
+const makeBold = (text: string) => `**${text}**`;
+const makeItalic = (text: string) => `*${text}*`;
+const makeCode = (text: string) => `\`${text}\``;
+
+// Text cleaning
+const removeLineBreaks = (text: string) => text.replace(/\n/g, ' ');
+const trimWhitespace = (text: string) => text.trim();
+const removeExtraSpaces = (text: string) => text.replace(/\s+/g, ' ');
+
+// Usage
+<button onClick={() => applyFormat(makeBold)}>Bold</button>;
+```
+
+## 🎨 Styling Examples
+
+### With Tailwind CSS
+
+```tsx
+<FormattingToolbar className="bg-white border border-gray-200 rounded-lg shadow-lg p-2">
+    {(applyFormat) => (
+        <div className="flex gap-1">
+            <button
+                onClick={() => applyFormat(toUpperCase)}
+                className="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+                ABC
+            </button>
+            <button
+                onClick={() => applyFormat(toLowerCase)}
+                className="px-3 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600"
+            >
+                abc
+            </button>
+        </div>
+    )}
+</FormattingToolbar>
+```
+
+### With CSS Modules
+
+```css
+/* styles.module.css */
+.toolbar {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    padding: 8px;
+}
+
+.toolbarButton {
+    padding: 4px 12px;
+    margin-right: 4px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.toolbarButton:hover {
+    background-color: #f1f5f9;
+}
+```
+
+```tsx
+import styles from './styles.module.css';
+
+<FormattingToolbar className={styles.toolbar}>
+    {(applyFormat) => (
+        <div>
+            <button className={styles.toolbarButton} onClick={() => applyFormat(makeBold)}>
+                Bold
+            </button>
+        </div>
+    )}
+</FormattingToolbar>;
+```
+
+## 🔍 Advanced Usage
+
+### Multiple Input Fields
+
+The library automatically manages a single toolbar across multiple inputs:
+
+```tsx
+function MultiInputForm() {
+    const { getInputProps } = useFormattingToolbar();
+    const [field1, setField1] = useState('');
+    const [field2, setField2] = useState('');
+
+    return (
+        <div>
+            <input
+                {...getInputProps()}
+                value={field1}
+                onChange={(e) => setField1(e.target.value)}
+                placeholder="First field"
+            />
+
+            <textarea
+                {...getInputProps()}
+                value={field2}
+                onChange={(e) => setField2(e.target.value)}
+                placeholder="Second field"
+            />
+
+            <FormattingToolbar>
+                {(applyFormat) => (
+                    <div>
+                        <button onClick={() => applyFormat(toUpperCase)}>UPPERCASE</button>
+                    </div>
+                )}
+            </FormattingToolbar>
+        </div>
+    );
+}
+```
+
+### Custom Formatter with Selection
+
+```tsx
+const wrapWithQuotes = (text: string) => `"${text}"`;
+const addPrefix = (text: string) => `• ${text}`;
+
+// The library automatically handles whether text is selected or not
+<button onClick={() => applyFormat(wrapWithQuotes)}>Add Quotes</button>;
+```
+
+### Conditional Toolbar Content
+
+```tsx
+<FormattingToolbar>
+    {(applyFormat) => {
+        const { activeElement } = useFormattingToolbarState().toolbarState;
+        const isTextarea = activeElement?.tagName === 'TEXTAREA';
+
+        return (
+            <div>
+                <button onClick={() => applyFormat(toUpperCase)}>UPPERCASE</button>
+                {isTextarea && <button onClick={() => applyFormat(removeLineBreaks)}>Remove Line Breaks</button>}
+            </div>
+        );
+    }}
+</FormattingToolbar>
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- Built with TypeScript and React
+- Inspired by modern text editing interfaces
+- Designed for developer experience and flexibility
+- Asmāʾ for the project name
+
+---

package/dist/index.d.ts

@@ -0,0 +1,306 @@
+import React$1, { JSX } from 'react';
+
+/**
+ * Function type for text formatting operations.
+ * Takes a string input and returns a transformed string.
+ *
+ * @example
+ * ```typescript
+ * const boldFormatter: FormatterFunction = (text) => `**${text}**`;
+ * const upperCaseFormatter: FormatterFunction = (text) => text.toUpperCase();
+ * ```
+ */
+type FormatterFunction = (text: string) => string;
+/**
+ * Union type representing supported HTML input elements for text formatting.
+ * Includes both single-line inputs and multi-line textareas.
+ */
+type TextInputElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * Configuration options for the formatting toolbar behavior and appearance.
+ */
+type ToolbarConfig = {
+    /**
+     * Custom positioning function to determine where the toolbar appears relative to the focused element.
+     * If not provided, defaults to positioning below the element.
+     *
+     * @param {TextInputElement} element - The focused input or textarea element
+     * @returns {ToolbarPosition} Position coordinates for the toolbar
+     *
+     * @example
+     * ```typescript
+     * const config: ToolbarConfig = {
+     *   getPosition: (element) => {
+     *     const rect = element.getBoundingClientRect();
+     *     return { x: rect.left, y: rect.top - 50 }; // Above the element
+     *   }
+     * };
+     * ```
+     */
+    getPosition?: (element: TextInputElement) => ToolbarPosition;
+    /**
+     * Delay in milliseconds before hiding the toolbar after the input loses focus.
+     * This allows users to click on toolbar buttons without the toolbar disappearing.
+     *
+     * @default 500
+     */
+    hideDelay?: number;
+    /**
+     * Whether to prevent the toolbar from closing when clicked.
+     * When true, clicking toolbar buttons won't cause the input to lose focus.
+     *
+     * @default true
+     */
+    preventCloseOnClick?: boolean;
+};
+/**
+ * Represents the x,y coordinates for positioning the toolbar on screen.
+ *
+ * @interface ToolbarPosition
+ */
+type ToolbarPosition = {
+    /** Horizontal position in pixels from the left edge of the viewport */
+    x: number;
+    /** Vertical position in pixels from the top edge of the viewport */
+    y: number;
+};
+/**
+ * Current state of the formatting toolbar including visibility, position, and active element.
+ *
+ * @interface ToolbarState
+ */
+type ToolbarState = {
+    /** The currently focused input/textarea element, or null if no element is active */
+    activeElement: null | TextInputElement;
+    /** Whether the toolbar is currently visible to the user */
+    isVisible: boolean;
+    /** Current position of the toolbar, or null if not positioned */
+    position: null | ToolbarPosition;
+};
+
+/**
+ * Props for the FormattingToolbar component.
+ *
+ * @interface FormattingToolbarProps
+ */
+type FormattingToolbarProps = {
+    /**
+     * Container element type for the toolbar.
+     * Can be any valid HTML element tag name.
+     *
+     * @default 'div'
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Render function that receives the applyFormat callback.
+     * Use this function to render your toolbar buttons and controls.
+     *
+     * @param {(formatter: FormatterFunction) => void} applyFormat - Function to apply text formatting
+     * @returns {React.ReactNode} The toolbar content to render
+     */
+    children: (applyFormat: (formatter: FormatterFunction) => void) => React$1.ReactNode;
+    /**
+     * Custom CSS class name for styling the toolbar container.
+     */
+    className?: string;
+    /**
+     * Toolbar configuration options.
+     * Merged with default configuration.
+     */
+    config?: ToolbarConfig;
+    /**
+     * Custom inline styles for the toolbar container.
+     * These styles are merged with the positioning styles (position, top, left, zIndex).
+     */
+    style?: React$1.CSSProperties;
+};
+/**
+ * Formatting toolbar component that renders when an input is focused.
+ * Automatically uses the global toolbar state - no need to pass a toolbar instance.
+ * Only renders when the global toolbar is visible and has a position.
+ *
+ * The toolbar automatically positions itself relative to the focused input element
+ * and provides an applyFormat function to child components for text transformation.
+ *
+ * @param {FormattingToolbarProps} props - Component props
+ * @returns {React.ReactElement | null} The toolbar element or null if not visible
+ *
+ * @example
+ * ```typescript
+ * import { FormattingToolbar } from 'blumbaben';
+ * import { Button } from './ui/button';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <textarea {...getInputProps()} />
+ *
+ *       <FormattingToolbar className="my-toolbar" as="section">
+ *         {(applyFormat) => (
+ *           <>
+ *             <Button onClick={() => applyFormat(text => text.toUpperCase())}>
+ *               UPPERCASE
+ *             </Button>
+ *             <Button onClick={() => applyFormat(text => `**${text}**`)}>
+ *               Bold
+ *             </Button>
+ *             <Button onClick={() => applyFormat(text => text.replace(/\n/g, ' '))}>
+ *               Remove Line Breaks
+ *             </Button>
+ *           </>
+ *         )}
+ *       </FormattingToolbar>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const FormattingToolbar: React$1.FC<FormattingToolbarProps>;
+
+/**
+ * Return type for the useFormattingToolbar hook containing all toolbar functionality.
+ *
+ * @interface UseFormattingToolbarResult
+ */
+type UseFormattingToolbarResult = {
+    /**
+     * Apply formatting to the currently active element.
+     *
+     * @param {FormatterFunction} formatter - Function to transform the selected or entire text
+     */
+    applyFormat: (formatter: FormatterFunction) => void;
+    /**
+     * Props to spread on your input/textarea components.
+     * Includes onFocus and onBlur handlers for toolbar management.
+     *
+     * @returns {object} Props object with focus and blur handlers
+     */
+    getInputProps: () => {
+        onBlur: (e: React.FocusEvent<TextInputElement>) => void;
+        onFocus: (e: React.FocusEvent<TextInputElement>) => void;
+    };
+    /**
+     * Props for the toolbar container element.
+     * Includes positioning styles and optional mouse event handlers.
+     *
+     * @returns {object} Props object with styles and event handlers
+     */
+    getToolbarProps: () => {
+        onMouseDown?: (e: React.MouseEvent) => void;
+        style: React.CSSProperties;
+    };
+    /** Function to manually hide the toolbar */
+    hideToolbar: () => void;
+    /** Whether the toolbar is currently visible */
+    isVisible: boolean;
+    /**
+     * Function to manually show the toolbar for a specific element.
+     *
+     * @param {TextInputElement} element - The element to show the toolbar for
+     */
+    showToolbar: (element: TextInputElement) => void;
+    /** Current toolbar state (shared globally across all instances) */
+    toolbarState: ToolbarState;
+};
+/**
+ * Hook for managing formatting toolbar functionality.
+ * Uses global state so all instances share the same toolbar - only one toolbar
+ * can be visible at a time across the entire application.
+ *
+ * @param {ToolbarConfig} [config={}] - Optional configuration for toolbar behavior
+ * @returns {UseFormattingToolbarResult} Object containing toolbar state and control functions
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { getInputProps, isVisible, applyFormat } = useFormattingToolbar({
+ *     hideDelay: 300,
+ *     getPosition: (element) => ({ x: 100, y: 200 })
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <textarea {...getInputProps()} />
+ *       {isVisible && (
+ *         <div>
+ *           <button onClick={() => applyFormat(text => text.toUpperCase())}>
+ *             UPPERCASE
+ *           </button>
+ *         </div>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useFormattingToolbar: (config?: ToolbarConfig) => UseFormattingToolbarResult;
+
+/**
+ * Applies a formatting function to either selected text or entire content of an element.
+ * If text is selected (selectionStart !== selectionEnd), formats only the selected portion.
+ * If no text is selected, formats the entire content of the element.
+ * Returns the formatted result without modifying the original element.
+ *
+ * @param {HTMLInputElement | HTMLTextAreaElement} element - The HTML input or textarea element containing the text
+ * @param {(text: string) => string} formatter - Function that takes a string and returns a formatted version
+ * @returns {string} The formatted text with either selected portion or entire content transformed
+ *
+ * @example
+ * ```typescript
+ * const textarea = document.querySelector('textarea');
+ * const uppercaseFormatter = (text: string) => text.toUpperCase();
+ * const result = applyFormattingOnSelection(textarea, uppercaseFormatter);
+ * ```
+ */
+declare const applyFormattingOnSelection: (element: HTMLInputElement | HTMLTextAreaElement, formatter: (text: string) => string) => string;
+/**
+ * Updates the value of an input or textarea element and optionally triggers onChange event.
+ * Creates a synthetic React change event if onChange callback is provided.
+ * Useful for programmatically updating form elements while maintaining React state consistency.
+ *
+ * @param {HTMLInputElement | HTMLTextAreaElement} element - The HTML input or textarea element to update
+ * @param {string} newValue - The new string value to set on the element
+ * @param {(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] - Optional React onChange event handler to call after updating the value
+ *
+ * @example
+ * ```typescript
+ * const handleChange = (e) => setFormValue(e.target.value);
+ * updateElementValue(textareaRef.current, 'New content', handleChange);
+ * ```
+ */
+declare const updateElementValue: (element: HTMLInputElement | HTMLTextAreaElement, newValue: string, onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void) => void;
+
+/**
+ * Higher-order component that adds formatting toolbar functionality to input components.
+ * Since the library uses global state, all wrapped components automatically share the same toolbar.
+ * Only one toolbar will be visible at a time, appearing for whichever input is currently focused.
+ *
+ * @template P - The props type of the wrapped component
+ * @param {React.ComponentType<P>} Component - The input component to enhance with toolbar functionality
+ * @param {ToolbarConfig} [config={}] - Optional configuration for toolbar behavior
+ * @returns {React.ForwardRefExoticComponent} Enhanced component with toolbar functionality
+ *
+ * @example
+ * ```typescript
+ * import { Textarea } from './ui/textarea';
+ * import { withFormattingToolbar } from 'blumbaben';
+ *
+ * const TextareaWithToolbar = withFormattingToolbar(Textarea, {
+ *   hideDelay: 300,
+ *   getPosition: (element) => {
+ *     const rect = element.getBoundingClientRect();
+ *     return { x: rect.left, y: rect.top - 50 }; // Above the element
+ *   }
+ * });
+ *
+ * // Usage
+ * <TextareaWithToolbar
+ *   value={content}
+ *   onChange={setContent}
+ *   placeholder="Start typing..."
+ * />
+ * ```
+ */
+declare const withFormattingToolbar: <P extends Record<string, any>>(Component: React$1.ComponentType<P>, config?: ToolbarConfig) => React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<P> & React$1.RefAttributes<TextInputElement>>;
+
+export { type FormatterFunction, FormattingToolbar, type TextInputElement, type ToolbarConfig, type ToolbarPosition, type ToolbarState, applyFormattingOnSelection, updateElementValue, useFormattingToolbar, withFormattingToolbar };

package/dist/index.js

@@ -0,0 +1,2 @@
+import I from"react";import{useCallback as S,useEffect as x,useState as y}from"react";var T=(o,t)=>{let n=o.selectionEnd??0,e=o.selectionStart??0,r=o.value??"";if(n>e){let s=r.substring(0,e),a=r.substring(e,n),m=r.substring(n);return s+t(a)+m}return t(r)},v=(o,t,n)=>{o.value=t,o.dispatchEvent(new Event("input",{bubbles:!0})),n&&n({currentTarget:o,target:o})};var F=o=>{let t=o.getBoundingClientRect();return{x:t.left,y:t.bottom+5}},d=class{activeElementOnChange;hideTimeout=null;state={activeElement:null,isVisible:!1,position:null};subscribers=new Set;applyFormat(t,n){let{activeElement:e}=this.state;if(!e){console.warn("No active element found for formatting");return}let r=T(e,t),s=n||this.activeElementOnChange;v(e,r,s),e.focus()}cancelScheduledHide(){this.clearHideTimeout()}getState(){return{...this.state}}hideToolbar(){this.clearHideTimeout(),this.activeElementOnChange=void 0,this.setState({activeElement:null,isVisible:!1,position:null})}scheduleHide(t){this.clearHideTimeout(),this.hideTimeout=setTimeout(()=>this.hideToolbar(),t)}showToolbar(t,n=F){this.clearHideTimeout();let e=t.props||{};this.activeElementOnChange=e.onChange,this.setState({activeElement:t,isVisible:!0,position:n(t)})}subscribe(t){return this.subscribers.add(t),()=>{this.subscribers.delete(t)}}clearHideTimeout(){this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=null)}setState(t){this.state={...this.state,...t},this.subscribers.forEach(n=>n(this.getState()))}},i=new d;var h=()=>{let[o,t]=y(i.getState());return x(()=>i.subscribe(t),[]),{applyFormat:S(e=>{i.applyFormat(e)},[]),isVisible:o.isVisible,toolbarState:o}};var A=({as:o="div",children:t,className:n="",config:e={},style:r={}})=>{let{applyFormat:s,toolbarState:a}=h(),{preventCloseOnClick:m=!0}=e;if(!a.isVisible||!a.position)return null;let b=m?p=>{p.preventDefault()}:void 0;return I.createElement(o,{className:n,onMouseDown:b,style:{left:a.position.x,position:"fixed",top:a.position.y,zIndex:1e3,...r}},t(s))};import{useCallback as c,useEffect as R,useState as C}from"react";var P=o=>{let t=o.getBoundingClientRect();return{x:t.left,y:t.bottom+5}},f=(o={})=>{let{getPosition:t=P,hideDelay:n=500,preventCloseOnClick:e=!0}=o,[r,s]=C(i.getState());R(()=>i.subscribe(s),[]);let a=c(l=>{i.showToolbar(l,t)},[t]),m=c(()=>{i.hideToolbar()},[]),b=c(l=>{a(l.currentTarget)},[a]),p=c(()=>{i.scheduleHide(n)},[n]),u=c(l=>{i.applyFormat(l)},[]),E=c(()=>({onBlur:p,onFocus:b}),[b,p]),g=c(()=>({style:{left:r.position?.x??0,position:"fixed",top:r.position?.y??0,zIndex:1e3},...e&&{onMouseDown:l=>{l.preventDefault(),i.cancelScheduledHide()}}}),[r.position,e]);return{applyFormat:u,getInputProps:E,getToolbarProps:g,hideToolbar:m,isVisible:r.isVisible,showToolbar:a,toolbarState:r}};import H,{forwardRef as M}from"react";var $=(o,t={})=>{let n=M((e,r)=>{let{getInputProps:s}=f(t),a=s(),p={...e,onBlur:u=>{a.onBlur(u),e.onBlur&&typeof e.onBlur=="function"&&e.onBlur(u)},onFocus:u=>{a.onFocus(u),e.onFocus&&typeof e.onFocus=="function"&&e.onFocus(u)},ref:r};return H.createElement(o,p)});return n.displayName=`withFormattingToolbar(${o.displayName||o.name})`,n};export{A as FormattingToolbar,T as applyFormattingOnSelection,v as updateElementValue,f as useFormattingToolbar,$ as withFormattingToolbar};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/formatting-toolbar.tsx","../src/hooks/useFormattingToolbarState.ts","../src/utils/domUtils.ts","../src/utils/globalToolbarManager.ts","../src/hooks/useFormattingToolbar.ts","../src/withFormattingToolbar.ts"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport type { FormatterFunction, ToolbarConfig } from './types';\n\nimport { useFormattingToolbarState } from './hooks/useFormattingToolbarState';\n\n/**\n * Props for the FormattingToolbar component.\n *\n * @interface FormattingToolbarProps\n */\ntype FormattingToolbarProps = {\n    /**\n     * Container element type for the toolbar.\n     * Can be any valid HTML element tag name.\n     *\n     * @default 'div'\n     */\n    as?: keyof JSX.IntrinsicElements;\n\n    /**\n     * Render function that receives the applyFormat callback.\n     * Use this function to render your toolbar buttons and controls.\n     *\n     * @param {(formatter: FormatterFunction) => void} applyFormat - Function to apply text formatting\n     * @returns {React.ReactNode} The toolbar content to render\n     */\n    children: (applyFormat: (formatter: FormatterFunction) => void) => React.ReactNode;\n\n    /**\n     * Custom CSS class name for styling the toolbar container.\n     */\n    className?: string;\n\n    /**\n     * Toolbar configuration options.\n     * Merged with default configuration.\n     */\n    config?: ToolbarConfig;\n\n    /**\n     * Custom inline styles for the toolbar container.\n     * These styles are merged with the positioning styles (position, top, left, zIndex).\n     */\n    style?: React.CSSProperties;\n};\n\n/**\n * Formatting toolbar component that renders when an input is focused.\n * Automatically uses the global toolbar state - no need to pass a toolbar instance.\n * Only renders when the global toolbar is visible and has a position.\n *\n * The toolbar automatically positions itself relative to the focused input element\n * and provides an applyFormat function to child components for text transformation.\n *\n * @param {FormattingToolbarProps} props - Component props\n * @returns {React.ReactElement | null} The toolbar element or null if not visible\n *\n * @example\n * ```typescript\n * import { FormattingToolbar } from 'blumbaben';\n * import { Button } from './ui/button';\n *\n * function App() {\n *   return (\n *     <div>\n *       <textarea {...getInputProps()} />\n *\n *       <FormattingToolbar className=\"my-toolbar\" as=\"section\">\n *         {(applyFormat) => (\n *           <>\n *             <Button onClick={() => applyFormat(text => text.toUpperCase())}>\n *               UPPERCASE\n *             </Button>\n *             <Button onClick={() => applyFormat(text => `**${text}**`)}>\n *               Bold\n *             </Button>\n *             <Button onClick={() => applyFormat(text => text.replace(/\\n/g, ' '))}>\n *               Remove Line Breaks\n *             </Button>\n *           </>\n *         )}\n *       </FormattingToolbar>\n *     </div>\n *   );\n * }\n * ```\n */\nexport const FormattingToolbar: React.FC<FormattingToolbarProps> = ({\n    as: Component = 'div',\n    children,\n    className = '',\n    config = {},\n    style = {},\n}) => {\n    const { applyFormat, toolbarState } = useFormattingToolbarState();\n    const { preventCloseOnClick = true } = config;\n\n    if (!toolbarState.isVisible || !toolbarState.position) {\n        return null;\n    }\n\n    const handleMouseDown = preventCloseOnClick\n        ? (e: React.MouseEvent) => {\n              e.preventDefault(); // Prevent blur event when clicking toolbar\n          }\n        : undefined;\n\n    return React.createElement(\n        Component,\n        {\n            className,\n            onMouseDown: handleMouseDown,\n            style: {\n                left: toolbarState.position.x,\n                position: 'fixed',\n                top: toolbarState.position.y,\n                zIndex: 1000,\n                ...style,\n            },\n        },\n        children(applyFormat),\n    );\n};\n","import { useCallback, useEffect, useState } from 'react';\n\nimport type { FormatterFunction, ToolbarState } from '@/types';\n\nimport { globalToolbarManager } from '@/utils/globalToolbarManager';\n\n/**\n * Lightweight hook that only subscribes to toolbar state without creating input handlers.\n * Useful for toolbar-only components that don't need to handle input focus/blur events.\n * Perfect for creating separate toolbar components that respond to the global toolbar state.\n *\n * @returns {object} Object containing applyFormat function, visibility state, and toolbar state\n *\n * @example\n * ```typescript\n * function ToolbarComponent() {\n *   const { applyFormat, isVisible, toolbarState } = useFormattingToolbarState();\n *\n *   if (!isVisible) return null;\n *\n *   return (\n *     <div style={{ position: 'fixed', top: toolbarState.position?.y, left: toolbarState.position?.x }}>\n *       <button onClick={() => applyFormat(text => `**${text}**`)}>\n *         Bold\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport const useFormattingToolbarState = () => {\n    const [toolbarState, setToolbarState] = useState<ToolbarState>(globalToolbarManager.getState());\n\n    useEffect(() => {\n        const unsubscribe = globalToolbarManager.subscribe(setToolbarState);\n        return unsubscribe;\n    }, []);\n\n    const applyFormat = useCallback((formatter: FormatterFunction) => {\n        globalToolbarManager.applyFormat(formatter);\n    }, []);\n\n    return {\n        applyFormat,\n        isVisible: toolbarState.isVisible,\n        toolbarState,\n    };\n};\n","/**\n * Applies a formatting function to either selected text or entire content of an element.\n * If text is selected (selectionStart !== selectionEnd), formats only the selected portion.\n * If no text is selected, formats the entire content of the element.\n * Returns the formatted result without modifying the original element.\n *\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The HTML input or textarea element containing the text\n * @param {(text: string) => string} formatter - Function that takes a string and returns a formatted version\n * @returns {string} The formatted text with either selected portion or entire content transformed\n *\n * @example\n * ```typescript\n * const textarea = document.querySelector('textarea');\n * const uppercaseFormatter = (text: string) => text.toUpperCase();\n * const result = applyFormattingOnSelection(textarea, uppercaseFormatter);\n * ```\n */\nexport const applyFormattingOnSelection = (\n    element: HTMLInputElement | HTMLTextAreaElement,\n    formatter: (text: string) => string,\n): string => {\n    const selectionEnd = element.selectionEnd ?? 0;\n    const selectionStart = element.selectionStart ?? 0;\n    const value = element.value ?? '';\n\n    if (selectionEnd > selectionStart) {\n        // Format only selected text\n        const before = value.substring(0, selectionStart);\n        const selected = value.substring(selectionStart, selectionEnd);\n        const after = value.substring(selectionEnd);\n\n        return before + formatter(selected) + after;\n    }\n\n    // Format entire text if no selection\n    return formatter(value);\n};\n\n/**\n * Updates the value of an input or textarea element and optionally triggers onChange event.\n * Creates a synthetic React change event if onChange callback is provided.\n * Useful for programmatically updating form elements while maintaining React state consistency.\n *\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The HTML input or textarea element to update\n * @param {string} newValue - The new string value to set on the element\n * @param {(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void} [onChange] - Optional React onChange event handler to call after updating the value\n *\n * @example\n * ```typescript\n * const handleChange = (e) => setFormValue(e.target.value);\n * updateElementValue(textareaRef.current, 'New content', handleChange);\n * ```\n */\nexport const updateElementValue = (\n    element: HTMLInputElement | HTMLTextAreaElement,\n    newValue: string,\n    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,\n) => {\n    element.value = newValue;\n\n    // Dispatch input event for React to detect the change\n    element.dispatchEvent(new Event('input', { bubbles: true }));\n\n    // Call onChange if provided (for controlled components)\n    if (onChange) {\n        const syntheticEvent = {\n            currentTarget: element,\n            target: element,\n        } as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;\n        onChange(syntheticEvent);\n    }\n};\n","import type { FormatterFunction, TextInputElement, ToolbarPosition, ToolbarState } from '@/types';\n\nimport { applyFormattingOnSelection, updateElementValue } from './domUtils';\n\n/**\n * Default positioning function that places the toolbar below the focused element.\n * Positions the toolbar 5 pixels below the bottom edge of the element, aligned to the left.\n *\n * @param {TextInputElement} element - The focused input or textarea element\n * @returns {ToolbarPosition} Position coordinates with toolbar below the element\n */\nconst defaultGetPosition = (element: TextInputElement): ToolbarPosition => {\n    const rect = element.getBoundingClientRect();\n    return {\n        x: rect.left,\n        y: rect.bottom + 5,\n    };\n};\n\n/**\n * Interface defining the contract for managing global toolbar state.\n * Provides methods for showing/hiding the toolbar and applying formatting.\n *\n * @interface ToolbarStateManager\n */\ntype ToolbarStateManager = {\n    /**\n     * Apply a formatting function to the currently active element.\n     *\n     * @param {FormatterFunction} formatter - Function to transform the text\n     * @param {(e: React.ChangeEvent<TextInputElement>) => void} [onChange] - Optional change handler\n     */\n    applyFormat(formatter: FormatterFunction, onChange?: (e: React.ChangeEvent<TextInputElement>) => void): void;\n\n    /** Cancel any scheduled toolbar hide operation */\n    cancelScheduledHide(): void;\n\n    /** Get the current toolbar state */\n    getState(): ToolbarState;\n\n    /** Immediately hide the toolbar */\n    hideToolbar(): void;\n\n    /**\n     * Schedule the toolbar to hide after a delay.\n     *\n     * @param {number} delay - Delay in milliseconds\n     */\n    scheduleHide(delay: number): void;\n\n    /**\n     * Show the toolbar for a specific element.\n     *\n     * @param {TextInputElement} element - The element to show the toolbar for\n     * @param {(element: TextInputElement) => ToolbarPosition} getPosition - Function to determine toolbar position\n     */\n    showToolbar(element: TextInputElement, getPosition: (element: TextInputElement) => ToolbarPosition): void;\n\n    /**\n     * Subscribe to toolbar state changes.\n     *\n     * @param {(state: ToolbarState) => void} callback - Function called when state changes\n     * @returns {() => void} Unsubscribe function\n     */\n    subscribe(callback: (state: ToolbarState) => void): () => void;\n};\n\n/**\n * Global toolbar state manager - single source of truth for all formatting toolbars.\n * Implements the singleton pattern to ensure only one toolbar is visible at a time\n * across the entire application.\n *\n * @class GlobalToolbarManager\n * @implements {ToolbarStateManager}\n */\nclass GlobalToolbarManager implements ToolbarStateManager {\n    private activeElementOnChange: ((e: React.ChangeEvent<TextInputElement>) => void) | undefined;\n\n    private hideTimeout: NodeJS.Timeout | null = null;\n    private state: ToolbarState = {\n        activeElement: null,\n        isVisible: false,\n        position: null,\n    };\n    private subscribers: Set<(state: ToolbarState) => void> = new Set();\n\n    applyFormat(formatter: FormatterFunction, onChange?: (e: React.ChangeEvent<TextInputElement>) => void): void {\n        const { activeElement } = this.state;\n\n        if (!activeElement) {\n            console.warn('No active element found for formatting');\n            return;\n        }\n\n        const newValue = applyFormattingOnSelection(activeElement, formatter);\n\n        // Use provided onChange or the stored one from the element\n        const onChangeHandler = onChange || this.activeElementOnChange;\n        updateElementValue(activeElement, newValue, onChangeHandler);\n\n        // Keep focus on the element after formatting\n        activeElement.focus();\n    }\n\n    cancelScheduledHide(): void {\n        this.clearHideTimeout();\n    }\n\n    getState(): ToolbarState {\n        return { ...this.state };\n    }\n\n    hideToolbar(): void {\n        this.clearHideTimeout();\n        this.activeElementOnChange = undefined;\n        this.setState({\n            activeElement: null,\n            isVisible: false,\n            position: null,\n        });\n    }\n\n    scheduleHide(delay: number): void {\n        this.clearHideTimeout();\n        this.hideTimeout = setTimeout(() => this.hideToolbar(), delay);\n    }\n\n    showToolbar(\n        element: TextInputElement,\n        getPosition: (element: TextInputElement) => ToolbarPosition = defaultGetPosition,\n    ): void {\n        this.clearHideTimeout();\n\n        // Store the onChange handler from the element for later use\n        const props = (element as any).props || {};\n        this.activeElementOnChange = props.onChange;\n\n        this.setState({\n            activeElement: element,\n            isVisible: true,\n            position: getPosition(element),\n        });\n    }\n\n    subscribe(callback: (state: ToolbarState) => void): () => void {\n        this.subscribers.add(callback);\n        return () => {\n            this.subscribers.delete(callback);\n        };\n    }\n\n    private clearHideTimeout(): void {\n        if (this.hideTimeout) {\n            clearTimeout(this.hideTimeout);\n            this.hideTimeout = null;\n        }\n    }\n\n    private setState(newState: Partial<ToolbarState>): void {\n        this.state = { ...this.state, ...newState };\n        this.subscribers.forEach((callback) => callback(this.getState()));\n    }\n}\n\n/**\n * Global singleton instance of the toolbar manager.\n * This instance is shared across all components using the formatting toolbar.\n *\n * @example\n * ```typescript\n * import { globalToolbarManager } from './globalToolbarManager';\n *\n * // Show toolbar for an element\n * globalToolbarManager.showToolbar(textareaElement);\n *\n * // Apply formatting\n * globalToolbarManager.applyFormat((text) => text.toUpperCase());\n * ```\n */\nconst globalToolbarManager = new GlobalToolbarManager();\n\nexport { globalToolbarManager };\n","import { useCallback, useEffect, useState } from 'react';\n\nimport type { FormatterFunction, TextInputElement, ToolbarConfig, ToolbarState } from '@/types';\n\nimport { globalToolbarManager } from '@/utils/globalToolbarManager';\n\n/**\n * Default positioning function that places the toolbar below the focused element.\n *\n * @param {TextInputElement} element - The focused input or textarea element\n * @returns {ToolbarPosition} Position coordinates for the toolbar\n */\nconst defaultGetPosition = (element: TextInputElement) => {\n    const rect = element.getBoundingClientRect();\n    return {\n        x: rect.left,\n        y: rect.bottom + 5,\n    };\n};\n\n/**\n * Return type for the useFormattingToolbar hook containing all toolbar functionality.\n *\n * @interface UseFormattingToolbarResult\n */\ntype UseFormattingToolbarResult = {\n    /**\n     * Apply formatting to the currently active element.\n     *\n     * @param {FormatterFunction} formatter - Function to transform the selected or entire text\n     */\n    applyFormat: (formatter: FormatterFunction) => void;\n\n    /**\n     * Props to spread on your input/textarea components.\n     * Includes onFocus and onBlur handlers for toolbar management.\n     *\n     * @returns {object} Props object with focus and blur handlers\n     */\n    getInputProps: () => {\n        onBlur: (e: React.FocusEvent<TextInputElement>) => void;\n        onFocus: (e: React.FocusEvent<TextInputElement>) => void;\n    };\n\n    /**\n     * Props for the toolbar container element.\n     * Includes positioning styles and optional mouse event handlers.\n     *\n     * @returns {object} Props object with styles and event handlers\n     */\n    getToolbarProps: () => {\n        onMouseDown?: (e: React.MouseEvent) => void;\n        style: React.CSSProperties;\n    };\n\n    /** Function to manually hide the toolbar */\n    hideToolbar: () => void;\n\n    /** Whether the toolbar is currently visible */\n    isVisible: boolean;\n\n    /**\n     * Function to manually show the toolbar for a specific element.\n     *\n     * @param {TextInputElement} element - The element to show the toolbar for\n     */\n    showToolbar: (element: TextInputElement) => void;\n\n    /** Current toolbar state (shared globally across all instances) */\n    toolbarState: ToolbarState;\n};\n\n/**\n * Hook for managing formatting toolbar functionality.\n * Uses global state so all instances share the same toolbar - only one toolbar\n * can be visible at a time across the entire application.\n *\n * @param {ToolbarConfig} [config={}] - Optional configuration for toolbar behavior\n * @returns {UseFormattingToolbarResult} Object containing toolbar state and control functions\n *\n * @example\n * ```typescript\n * function MyComponent() {\n *   const { getInputProps, isVisible, applyFormat } = useFormattingToolbar({\n *     hideDelay: 300,\n *     getPosition: (element) => ({ x: 100, y: 200 })\n *   });\n *\n *   return (\n *     <div>\n *       <textarea {...getInputProps()} />\n *       {isVisible && (\n *         <div>\n *           <button onClick={() => applyFormat(text => text.toUpperCase())}>\n *             UPPERCASE\n *           </button>\n *         </div>\n *       )}\n *     </div>\n *   );\n * }\n * ```\n */\nexport const useFormattingToolbar = (config: ToolbarConfig = {}): UseFormattingToolbarResult => {\n    const { getPosition = defaultGetPosition, hideDelay = 500, preventCloseOnClick = true } = config;\n\n    // Subscribe to global toolbar state\n    const [toolbarState, setToolbarState] = useState<ToolbarState>(globalToolbarManager.getState());\n\n    useEffect(() => {\n        const unsubscribe = globalToolbarManager.subscribe(setToolbarState);\n        return unsubscribe;\n    }, []);\n\n    const showToolbar = useCallback(\n        (element: TextInputElement) => {\n            globalToolbarManager.showToolbar(element, getPosition);\n        },\n        [getPosition],\n    );\n\n    const hideToolbar = useCallback(() => {\n        globalToolbarManager.hideToolbar();\n    }, []);\n\n    const handleFocus = useCallback(\n        (e: React.FocusEvent<TextInputElement>) => {\n            showToolbar(e.currentTarget);\n        },\n        [showToolbar],\n    );\n\n    const handleBlur = useCallback(() => {\n        globalToolbarManager.scheduleHide(hideDelay);\n    }, [hideDelay]);\n\n    const applyFormat = useCallback((formatter: FormatterFunction) => {\n        globalToolbarManager.applyFormat(formatter);\n    }, []);\n\n    const getInputProps = useCallback(\n        () => ({\n            onBlur: handleBlur,\n            onFocus: handleFocus,\n        }),\n        [handleFocus, handleBlur],\n    );\n\n    const getToolbarProps = useCallback(\n        () => ({\n            style: {\n                left: toolbarState.position?.x ?? 0,\n                position: 'fixed' as const,\n                top: toolbarState.position?.y ?? 0,\n                zIndex: 1000,\n            },\n            ...(preventCloseOnClick && {\n                onMouseDown: (e: React.MouseEvent) => {\n                    e.preventDefault(); // Prevent blur event when clicking toolbar\n                    globalToolbarManager.cancelScheduledHide();\n                },\n            }),\n        }),\n        [toolbarState.position, preventCloseOnClick],\n    );\n\n    return {\n        applyFormat,\n        getInputProps,\n        getToolbarProps,\n        hideToolbar,\n        isVisible: toolbarState.isVisible,\n        showToolbar,\n        toolbarState,\n    };\n};\n","import React, { forwardRef } from 'react';\n\nimport type { TextInputElement, ToolbarConfig } from './types';\n\nimport { useFormattingToolbar } from './hooks/useFormattingToolbar';\n\n/**\n * Higher-order component that adds formatting toolbar functionality to input components.\n * Since the library uses global state, all wrapped components automatically share the same toolbar.\n * Only one toolbar will be visible at a time, appearing for whichever input is currently focused.\n *\n * @template P - The props type of the wrapped component\n * @param {React.ComponentType<P>} Component - The input component to enhance with toolbar functionality\n * @param {ToolbarConfig} [config={}] - Optional configuration for toolbar behavior\n * @returns {React.ForwardRefExoticComponent} Enhanced component with toolbar functionality\n *\n * @example\n * ```typescript\n * import { Textarea } from './ui/textarea';\n * import { withFormattingToolbar } from 'blumbaben';\n *\n * const TextareaWithToolbar = withFormattingToolbar(Textarea, {\n *   hideDelay: 300,\n *   getPosition: (element) => {\n *     const rect = element.getBoundingClientRect();\n *     return { x: rect.left, y: rect.top - 50 }; // Above the element\n *   }\n * });\n *\n * // Usage\n * <TextareaWithToolbar\n *   value={content}\n *   onChange={setContent}\n *   placeholder=\"Start typing...\"\n * />\n * ```\n */\nexport const withFormattingToolbar = <P extends Record<string, any>>(\n    Component: React.ComponentType<P>,\n    config: ToolbarConfig = {},\n) => {\n    const WrappedComponent = forwardRef<TextInputElement, P>((props, ref) => {\n        // All instances share the same global toolbar state\n        const { getInputProps } = useFormattingToolbar(config);\n        const toolbarProps = getInputProps();\n\n        const handleFocusEvent = (e: React.FocusEvent<TextInputElement>) => {\n            toolbarProps.onFocus(e);\n            if (props.onFocus && typeof props.onFocus === 'function') {\n                props.onFocus(e);\n            }\n        };\n\n        const handleBlurEvent = (e: React.FocusEvent<TextInputElement>) => {\n            toolbarProps.onBlur(e);\n            if (props.onBlur && typeof props.onBlur === 'function') {\n                props.onBlur(e);\n            }\n        };\n\n        const enhancedProps = {\n            ...props,\n            onBlur: handleBlurEvent,\n            onFocus: handleFocusEvent,\n            ref,\n        } as P & { ref: React.ForwardedRef<TextInputElement> };\n\n        return React.createElement(Component, enhancedProps);\n    });\n\n    WrappedComponent.displayName = `withFormattingToolbar(${Component.displayName || Component.name})`;\n\n    return WrappedComponent;\n};\n"],"mappings":"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","names":["React","useCallback","useEffect","useState","applyFormattingOnSelection","element","formatter","selectionEnd","selectionStart","value","before","selected","after","updateElementValue","newValue","onChange","defaultGetPosition","element","rect","GlobalToolbarManager","formatter","onChange","activeElement","newValue","applyFormattingOnSelection","onChangeHandler","updateElementValue","delay","getPosition","props","callback","newState","globalToolbarManager","useFormattingToolbarState","toolbarState","setToolbarState","useState","globalToolbarManager","useEffect","useCallback","formatter","FormattingToolbar","Component","children","className","config","style","applyFormat","toolbarState","useFormattingToolbarState","preventCloseOnClick","handleMouseDown","e","React","useCallback","useEffect","useState","defaultGetPosition","element","rect","useFormattingToolbar","config","getPosition","hideDelay","preventCloseOnClick","toolbarState","setToolbarState","useState","globalToolbarManager","useEffect","showToolbar","useCallback","hideToolbar","handleFocus","e","handleBlur","applyFormat","formatter","getInputProps","getToolbarProps","React","forwardRef","withFormattingToolbar","Component","config","WrappedComponent","forwardRef","props","ref","getInputProps","useFormattingToolbar","toolbarProps","enhancedProps","e","React"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "blumbaben",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ragaeeb/blumbaben.git"
+    },
+    "module": "./dist/index.js",
+    "version": "1.0.0",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "@eslint/js": "^9.30.1",
+        "@types/bun": "^1.2.17",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "eslint": "^9.30.1",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-perfectionist": "^4.15.0",
+        "eslint-plugin-prettier": "^5.5.1",
+        "eslint-plugin-react": "^7.37.5",
+        "globals": "^16.3.0",
+        "prettier": "^3.6.2",
+        "semantic-release": "^24.2.6",
+        "tsup": "^8.5.0",
+        "typescript-eslint": "^8.35.1"
+    },
+    "peerDependencies": {
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+    },
+    "type": "module",
+    "bugs": {
+        "url": "https://github.com/ragaeeb/blumbaben/issues"
+    },
+    "description": "A lightweight TypeScript React hook to show a toolbar when an input is focused.",
+    "homepage": "https://github.com/ragaeeb/blumbaben",
+    "keywords": [
+        "textarea",
+        "multiline",
+        "input",
+        "forms",
+        "styling",
+        "formatting"
+    ],
+    "license": "MIT",
+    "scripts": {
+        "build": "tsup"
+    }
+}