@dimasbaguspm/versaur 0.0.60 → 0.0.62

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/overlays/drawer/drawer.atoms.d.ts

@@ -1,11 +1,6 @@
 import { default as React } from 'react';
 import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderTabProps } from './types';
-import { ButtonIconProps, TextProps } from '../../primitive';
-/**
- * DrawerOverlay - Background overlay that appears behind the drawer
- * Provides a dark blurred background to help users focus on the drawer content
- */
-export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { ButtonIconProps, HeadingProps } from '../../primitive';
 /**
  * DrawerHeader - Header section of the drawer
  * Uses semantic <header> element with proper ARIA labeling
@@ -15,7 +10,7 @@ export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderP
  * DrawerTitle - Title element for the drawer header
  * Automatically uses the titleId from context for ARIA labeling
  */
-export declare const DrawerTitle: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * DrawerCloseButton - Close button for the drawer
  * Triggers the onClose callback when clicked

package/dist/types/overlays/drawer/drawer.d.ts

@@ -11,7 +11,7 @@ export declare const DrawerRoot: React.FC<DrawerProps>;
  */
 export declare const Drawer: React.FC<DrawerProps> & {
     Header: React.ForwardRefExoticComponent<import('./types').DrawerHeaderProps & React.RefAttributes<HTMLElement>>;
-    Title: React.ForwardRefExoticComponent<import('../..').TextProps & React.RefAttributes<HTMLElement>>;
+    Title: React.ForwardRefExoticComponent<import('../..').HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
     CloseButton: React.ForwardRefExoticComponent<Partial<import('../..').ButtonIconProps> & React.RefAttributes<HTMLButtonElement>>;
     Tab: React.ForwardRefExoticComponent<import('./types').DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
     Body: React.ForwardRefExoticComponent<import('./types').DrawerBodyProps & React.RefAttributes<HTMLElement>>;

package/dist/types/overlays/drawer/types.d.ts

@@ -1,9 +1,5 @@
 import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
 import { OverlayPortalProps } from '../../utils/overlay-portal';
-/**
- * Drawer transition type options
- */
-export type DrawerTransitionType = 'slide' | 'fade';
 /**
  * Drawer positioning options
  */
@@ -24,8 +20,6 @@ export interface DrawerContextValue {
     position: DrawerPosition;
     /** Drawer size */
     size: DrawerSize;
-    /** Drawer transition type */
-    transitionType: DrawerTransitionType;
     /** Whether to disable overlay click to close */
     disableOverlayClickToClose: boolean;
     /** Whether to disable escape key down */
@@ -38,7 +32,7 @@ export interface DrawerContextValue {
 /**
  * Props for the Drawer component (controlled component)
  */
-export interface DrawerProps extends ComponentPropsWithoutRef<'div'>, OverlayPortalProps, Partial<Omit<DrawerContextValue, 'isOpen' | 'onClose'>>, Pick<DrawerContextValue, 'isOpen' | 'onClose'> {
+export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'onClose' | 'open'>, OverlayPortalProps, Partial<Omit<DrawerContextValue, 'isOpen' | 'onClose'>>, Pick<DrawerContextValue, 'isOpen' | 'onClose'> {
     /** Children components */
     children: ReactNode;
 }
@@ -72,7 +66,3 @@ export interface DrawerFooterProps extends ComponentPropsWithoutRef<'footer'> {
     /** Children components */
     children: ReactNode;
 }
-/**
- * Props for the DrawerOverlay component
- */
-export type DrawerOverlayProps = ComponentPropsWithoutRef<'div'>;

package/dist/types/overlays/modal/modal.atoms.d.ts

@@ -1,8 +1,4 @@
-import { ModalHeaderProps, ModalFooterProps, ModalOverlayProps, ModalBodyProps } from './types';
+import { ModalHeaderProps, ModalFooterProps, ModalBodyProps } from './types';
 export declare const ModalHeader: import('react').ForwardRefExoticComponent<ModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ModalFooter: import('react').ForwardRefExoticComponent<ModalFooterProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ModalBody: import('react').ForwardRefExoticComponent<ModalBodyProps & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * ModalOverlay atom: handles overlay rendering, click-to-close, and transitions
- */
-export declare const ModalOverlay: import('react').ForwardRefExoticComponent<ModalOverlayProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/overlays/modal/types.d.ts

@@ -26,7 +26,7 @@ export interface ModalContextValue {
 /**
  * Modal compound root
  */
-export interface ModalRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, OverlayPortalProps, Partial<Omit<ModalContextValue, 'isOpen' | 'onClose'>>, Pick<ModalContextValue, 'isOpen' | 'onClose'> {
+export interface ModalRootProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'onClose' | 'children'>, OverlayPortalProps, Partial<Omit<ModalContextValue, 'isOpen' | 'onClose'>>, Pick<ModalContextValue, 'isOpen' | 'onClose'> {
     /** Children (Modal compound parts) */
     children: ReactNode;
 }
@@ -42,4 +42,3 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-export type ModalOverlayProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

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/heading/types.d.ts

@@ -1,33 +1,30 @@
 import { HTMLAttributes, ReactNode } from 'react';
 /**
  * HeadingProps defines the props for the Heading component
- * @property level - Heading level (1-6, corresponding to h1-h6)
+ * @property as - HTML heading element to render (h1-h6)
  * @property color - Versaur color system (primary, secondary, tertiary, ghost, neutral, success, info, warning, danger)
- * @property hasUnderline - Whether to underline the text
- * @property isCapitalize - Whether to capitalize the text
+ * @property transform - Text transform helper
+ * @property decoration - Text decoration helper
  * @property hasMargin - Whether to add margin bottom (mb-4)
  * @property align - Text alignment
- * @property italic - Whether to italicize the text
  * @property clamp - Clamp lines (1-5) or none
  * @property ellipsis - Whether to truncate text with ellipsis
  * @property className - Additional CSS classes
  * @property children - Text content
  */
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-    /** Heading level (1-6, corresponding to h1-h6) */
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** HTML heading element to render (h1-h6) */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Versaur color system */
     color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'inherit' | 'white' | 'black' | 'gray';
-    /** Underline text */
-    hasUnderline?: boolean;
-    /** Capitalize text */
-    isCapitalize?: boolean;
+    /** Text transform helper */
+    transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    /** Text decoration helper */
+    decoration?: 'none' | 'underline' | 'line-through' | 'overline';
     /** Add margin bottom (mb-4) */
     hasMargin?: boolean;
     /** Text alignment */
     align?: 'left' | 'center' | 'right' | 'justify';
-    /** Italic text */
-    italic?: boolean;
     /** Clamp lines (1-5) or none */
     clamp?: 1 | 2 | 3 | 4 | 5 | 'none';
     /** Ellipsis (truncate) */

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/types/primitive/text/text.d.ts

@@ -1,7 +1,10 @@
+import { default as React } from 'react';
 import { TextProps } from './types';
 /**
  * Text component for Versaur UI
- * Provides semantic typography, color, underline, and capitalization support
- * @example <Text as="h1" color="primary" hasUnderline isCapitalize>bar</Text>
+ * Provides semantic typography, color, decoration, and transform support
+ * @example <Text as="p" color="primary" decoration="underline" transform="capitalize">bar</Text>
  */
-export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;
+type TextRef = HTMLParagraphElement | HTMLSpanElement | HTMLQuoteElement | HTMLLabelElement | HTMLElement;
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<TextRef>>;
+export {};

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

@@ -1,22 +1,22 @@
 import { HTMLAttributes, ElementType, ReactNode } from 'react';
 /**
  * TextProps defines the props for the Text component
- * @property as - HTML element to render (e.g., 'span', 'h1', 'p')
+ * @property as - HTML element to render (inline-friendly elements)
  * @property color - Versaur color system (primary, secondary, tertiary, ghost, neutral, success, info, warning, danger)
- * @property hasUnderline - Whether to underline the text
- * @property isCapitalize - Whether to capitalize the text
+ * @property transform - Text transform helper (capitalize, uppercase, lowercase, or none)
+ * @property decoration - Text decoration helper (underline, line-through, overline, none)
  * @property className - Additional CSS classes
  * @property children - Text content
  */
 export interface TextProps extends HTMLAttributes<HTMLElement> {
-    /** HTML element to render (e.g., 'span', 'h1', 'p') */
-    as?: ElementType;
+    /** HTML element to render (inline-friendly elements) */
+    as?: Extract<ElementType, 'span' | 'p' | 'q' | 's' | 'strong' | 'em' | 'small' | 'label'>;
     /** Versaur color system */
     color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'inherit' | 'white' | 'black' | 'gray';
-    /** Underline text */
-    hasUnderline?: boolean;
-    /** Capitalize text */
-    isCapitalize?: boolean;
+    /** Text transform helper */
+    transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    /** Text decoration helper */
+    decoration?: 'none' | 'underline' | 'line-through' | 'overline';
     /** Text alignment */
     align?: 'left' | 'center' | 'right' | 'justify';
     /** Italic text */
@@ -25,15 +25,7 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
     clamp?: 1 | 2 | 3 | 4 | 5 | 'none';
     /** Ellipsis (truncate) */
     ellipsis?: boolean;
-    /** Tailwind font size utility (e.g., 'xs', 'sm', 'base', 'lg', 'xl', etc.)
-     *  If set, overrides the default font size from the `as` prop and design system
-     *  See: https://tailwindcss.com/docs/font-size
-     */
-    fontSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | undefined;
-    /** Tailwind font weight utility (e.g., 'thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black')
-     *  If set, overrides the default font weight from the `as` prop and design system
-     *  See: https://tailwindcss.com/docs/font-weight
-     */
+    /** Font weight utility (matches Tailwind font-weight) */
     fontWeight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | undefined;
     /** Text content */
     children: ReactNode;

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

@@ -1,4 +1,9 @@
+import { default as React } from 'react';
 import { TileProps } from './types';
+type TileComponent = React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>> & {
+    /** Props type alias exposed as Tile.Props */
+    Props: TileProps;
+};
 /**
  * Tile component - A flexible box container with various styling options
  *
@@ -8,4 +13,5 @@ import { TileProps } from './types';
  * - Rounded or square shapes
  * - Accessible and semantic
  */
-export declare const Tile: import('react').ForwardRefExoticComponent<TileProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Tile: TileComponent;
+export {};

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

@@ -1,10 +1,15 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { tileVariants } from './helpers';
 /**
  * Props for the Tile component
  */
 export interface TileProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof tileVariants> {
+    /**
+     * Element type to render as
+     * @default 'div'
+     */
+    as?: keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'aside'>;
     /**
      * Visual appearance variant
      * @default 'white'

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.62",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",
@@ -109,6 +109,7 @@
     "eslint-plugin-react-refresh": "0.4.20",
     "eslint-plugin-storybook": "9.0.16",
     "globals": "16.3.0",
+    "happy-dom": "20.0.11",
     "jsdom": "26.1.0",
     "lucide-react": "0.525.0",
     "prettier": "3.5.1",