@dimasbaguspm/versaur 0.0.60 → 0.0.61

package/dist/js/{tooltip-Dpx3TpR6.js → tooltip-C1TbSbNF.js}

@@ -2,7 +2,7 @@ import { j as r } from "./jsx-runtime-C5mzlN2N.js";
 import g, { useState as y, useEffect as v, createContext as V, useContext as T, forwardRef as p, useRef as S, useId as k, useMemo as _, cloneElement as $ } from "react";
 import { c as h, a as u } from "./index-BDtz_hQY.js";
 import { XIcon as R } from "lucide-react";
-import { n as D, l as H, H as G, t as U } from "./image-rectangle-CCvXv24a.js";
+import { p as D, l as H, H as G, v as U } from "./image-rectangle-CLLXF8w_.js";
 import "./snackbar-CTq4MLir.js";
 import X from "react-dom";
 function q() {

package/dist/js/{top-bar-DMBbEIlR.js → top-bar-BGJufFzt.js}

@@ -2,7 +2,7 @@ import { j as s } from "./jsx-runtime-C5mzlN2N.js";
 import * as j from "react";
 import { forwardRef as l, createContext as S, useContext as C, useState as w } from "react";
 import { c as n, a as d } from "./index-BDtz_hQY.js";
-import { n as x, I as N } from "./image-rectangle-CCvXv24a.js";
+import { p as x, I as N } from "./image-rectangle-CLLXF8w_.js";
 import "./snackbar-CTq4MLir.js";
 import { L as V } from "./skeleton-BRwIW26B.js";
 import { ChevronDown as z, ChevronRight as B, ChevronLeft as H } from "lucide-react";

package/dist/types/forms/textarea-input/index.d.ts

@@ -1,2 +1,2 @@
 export { TextAreaInput } from './textarea-input';
-export type { TextAreaInputProps } from './types';
+export type { TextAreaInputProps, FormatType, FormatState } from './types';

package/dist/types/forms/textarea-input/textarea-input.atoms.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { FormatType } from './types';
+import { IconProps } from '../../primitive/icon';
+/**
+ * Props for the TextAreaInputToolbarButton component
+ */
+export interface TextAreaInputToolbarButtonProps {
+    /**
+     * The format type this button applies
+     */
+    format: FormatType;
+    /**
+     * Whether this format is currently active
+     */
+    isActive: boolean;
+    /**
+     * Icon component to render
+     */
+    icon: IconProps['as'];
+    /**
+     * Accessible label for the button
+     */
+    label: string;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick: (format: FormatType) => void;
+}
+/**
+ * Individual toolbar button for formatting actions
+ */
+export declare const TextAreaInputToolbarButton: React.ForwardRefExoticComponent<TextAreaInputToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the TextAreaInputToolbar component
+ */
+export interface TextAreaInputToolbarProps {
+    /**
+     * Child toolbar buttons
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Container for formatting toolbar buttons
+ */
+export declare const TextAreaInputToolbar: React.ForwardRefExoticComponent<TextAreaInputToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/textarea-input/textarea-input.d.ts

@@ -5,6 +5,7 @@ import { TextAreaInputProps } from './types';
  *
  * Uses contentEditable div for robust multi-line text input with better control
  * Provides error states, disabled, and readOnly support
+ * Supports rich text formatting with an optional toolbar
  * Follows browser standards and accessibility best practices
  */
 export declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/textarea-input/types.d.ts

@@ -1,4 +1,23 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Available formatting options for rich text editing
+ */
+export type FormatType = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'h1' | 'h2' | 'h3' | 'orderedList' | 'unorderedList' | 'link';
+/**
+ * State of active formats in the current selection
+ */
+export interface FormatState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    h1: boolean;
+    h2: boolean;
+    h3: boolean;
+    orderedList: boolean;
+    unorderedList: boolean;
+    link: boolean;
+}
 /**
  * Props for the TextAreaInput component
  */
@@ -52,4 +71,13 @@ export interface TextAreaInputProps extends Omit<HTMLAttributes<HTMLDivElement>,
      * Whether the textarea is required
      */
     required?: boolean;
+    /**
+     * Whether to show the formatting toolbar
+     * @default false
+     */
+    showToolbar?: boolean;
+    /**
+     * Allowed formatting options (if not specified, all are allowed)
+     */
+    allowedFormats?: FormatType[];
 }

package/dist/types/forms/textarea-input/use-textarea-formatting.d.ts

@@ -0,0 +1,21 @@
+import { FormatType } from './types';
+/**
+ * Custom hook for managing rich text formatting in TextAreaInput
+ *
+ * Handles toolbar state, format application, and selection tracking
+ */
+export declare const useTextAreaFormatting: (enabled: boolean, contentRef: React.RefObject<HTMLDivElement | null>) => {
+    formatState: {
+        bold: boolean;
+        italic: boolean;
+        underline: boolean;
+        strikethrough: boolean;
+        h1: boolean;
+        h2: boolean;
+        h3: boolean;
+        orderedList: boolean;
+        unorderedList: boolean;
+        link: boolean;
+    };
+    handleFormatClick: (format: FormatType) => void;
+};

package/dist/types/primitive/formatted-text/formatted-text.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { FormattedTextProps } from './types';
+/**
+ * FormattedText component for Versaur UI
+ *
+ * Displays rich HTML content with consistent formatting styles
+ * Matches the styling used in TextAreaInput with toolbar formatting
+ * Should be used with sanitized HTML content to prevent XSS attacks
+ */
+export declare const FormattedText: React.ForwardRefExoticComponent<FormattedTextProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/primitive/formatted-text/index.d.ts

@@ -0,0 +1,3 @@
+export { FormattedText } from './formatted-text';
+export { formattedContentStyles } from './helpers';
+export type { FormattedTextProps } from './types';

package/dist/types/primitive/formatted-text/types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the FormattedText component
+ */
+export interface FormattedTextProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The HTML content to display (should be sanitized if from user input)
+     */
+    content: string;
+    /**
+     * Whether to allow the content to be scrollable
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Maximum height for scrollable content (in rem units)
+     */
+    maxHeight?: number;
+}

package/dist/types/primitive/index.d.ts

@@ -14,6 +14,7 @@ export * from './button-menu-icon';
 export * from './button-icon';
 export * from './card';
 export * from './filter-chip';
+export * from './formatted-text';
 export * from './heading';
 export * from './hr';
 export * from './icon';

package/dist/utils/enforce-subpath-import.js

@@ -59,6 +59,8 @@ const symbolToSubpath = {
   "ButtonMenuIcon": "primitive",
   "Card": "primitive",
   "FilterChip": "primitive",
+  "FormattedText": "primitive",
+  "formattedContentStyles": "primitive",
   "Heading": "primitive",
   "Hr": "primitive",
   "Icon": "primitive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",