@borisj74/bv-ds 0.1.6 → 0.1.8

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default, { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
+import { Editor } from '@tiptap/react';
 
 type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
 interface ActivityFeedProps {
@@ -2372,6 +2373,12 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
     header?: ReactNode;
     /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
     children?: ReactNode;
+    /**
+     * `dualTier` only — second-tier panel (256px) shown beside the primary rail,
+     * listing the active item's sub-pages. Compose `NavItemBase` rows. Ignored for
+     * other types and on mobile (where only the primary rail shows).
+     */
+    panel?: ReactNode;
     /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
     footer?: ReactNode;
     /** Controlled mobile-drawer open state. Omit to use internal state. */
@@ -2385,11 +2392,11 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
  * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
- * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
- * 280px column here — compose the icon rail separately if you need the two-tier
- * layout. (flagged)
+ * `dualTier` renders a 280px primary rail plus a 256px second-tier `panel`
+ * (total 536px) for the active item's sub-pages; on mobile only the primary
+ * rail shows.
  */
-declare function SidebarNavigation({ type, logo, header, children, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
+declare function SidebarNavigation({ type, logo, header, children, panel, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
 
 interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Featured-icon slot (left of the heading). */
@@ -2669,6 +2676,25 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare function Tag({ size, children, icon, checkbox, checked, onCheckedChange, count, onClose, className, ...rest }: TagProps): react.JSX.Element;
 
+interface TextEditorProps {
+    placeholder?: string;
+    /** Initial HTML content. */
+    content?: string;
+    /** Fires with serialized HTML on every change. */
+    onUpdate?: (html: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Rich-text editor — composes the `TextEditorToolbar` / `TextEditorTooltip`
+ * chrome shells onto a TipTap editor (`useTextEditor`). The toolbar buttons map
+ * to TipTap commands and reflect `editor.isActive(...)`; a `TextEditorTooltip`
+ * surfaces link controls when the caret sits inside a link.
+ *
+ * Pass `content` as initial HTML and read changes via `onUpdate(html)`.
+ */
+declare function TextEditor({ placeholder, content, onUpdate, disabled, className, }: TextEditorProps): react.JSX.Element;
+
 interface TextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
     /** Toolbar controls — typically `ButtonUtility` groups. */
     children?: ReactNode;
@@ -2826,6 +2852,30 @@ interface VerificationCodeInputProps {
  */
 declare function VerificationCodeInput({ digits, value, onChange, size, label, hint, destructive, disabled, className, "aria-label": ariaLabel, }: VerificationCodeInputProps): react.JSX.Element;
 
+interface UseTextEditorOptions {
+    /** Placeholder shown while the document is empty. */
+    placeholder?: string;
+    /** Initial HTML content. */
+    content?: string;
+    /** Whether the editor is editable (default `true`). */
+    editable?: boolean;
+    /** Fires with the serialized HTML on every change. */
+    onUpdate?: (html: string) => void;
+}
+/**
+ * Thin wrapper around TipTap's `useEditor`, pre-configured with the standard
+ * extension set: StarterKit (bold/italic/strike/code/heading/lists — and, in
+ * TipTap v3, **underline + link**), TextAlign (left/center/right) and
+ * Placeholder. Link is configured `openOnClick: false` via StarterKit.
+ *
+ * Note: Underline and Link ship inside StarterKit v3, so they are NOT added as
+ * separate extensions (doing so throws a duplicate-extension error).
+ *
+ * Returns the TipTap `Editor` (or `null` until mounted). Compose it with
+ * `EditorContent` + the toolbar, or use the `TextEditor` composite.
+ */
+declare function useTextEditor({ placeholder, content, editable, onUpdate, }?: UseTextEditorOptions): Editor | null;
+
 /** Line-art cloud illustration (empty-state / upload). Color via `currentColor`. */
 declare function CloudIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
 
@@ -2846,4 +2896,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditor, type TextEditorProps, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type UseTextEditorOptions, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu, useTextEditor };

package/dist/index.js

@@ -1,7 +1,11 @@
 import * as React28 from 'react';
 import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02 } from '@borisj74/bv-ds-icons';
+import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01 } from '@borisj74/bv-ds-icons';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { StarterKit } from '@tiptap/starter-kit';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { Placeholder } from '@tiptap/extension-placeholder';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -4863,10 +4867,10 @@ function ActivityFeed({
     }
   );
 }
-function ringGeometry(diameter, stroke, value, opts = {}) {
+function ringGeometry(diameter, stroke2, value, opts = {}) {
   const { ringIndex = 0, ringGap = 0, arcFraction = 1 } = opts;
   const center = diameter / 2;
-  const radius = center - stroke / 2 - ringIndex * (stroke + ringGap);
+  const radius = center - stroke2 / 2 - ringIndex * (stroke2 + ringGap);
   const circumference = 2 * Math.PI * radius;
   const arc = circumference * arcFraction;
   const filled = Math.max(0, Math.min(100, value)) / 100 * arc;
@@ -4874,7 +4878,7 @@ function ringGeometry(diameter, stroke, value, opts = {}) {
 }
 function RingPair({
   geo,
-  stroke,
+  stroke: stroke2,
   trackClass = "stroke-utility-neutral-100",
   progressClass,
   progressColor,
@@ -4890,7 +4894,7 @@ function RingPair({
         r: radius,
         fill: "none",
         className: trackClass,
-        strokeWidth: stroke,
+        strokeWidth: stroke2,
         strokeDasharray: `${arc} ${circumference}`
       }
     ),
@@ -4903,7 +4907,7 @@ function RingPair({
         fill: "none",
         className: clsx_default(!progressColor && progressClass),
         stroke: progressColor,
-        strokeWidth: stroke,
+        strokeWidth: stroke2,
         strokeLinecap: linecap,
         strokeDasharray: `${filled} ${circumference}`
       }
@@ -4935,10 +4939,10 @@ function ActivityGauge({
   legend = "none",
   className
 }) {
-  const { diameter, stroke, gap, valueClass } = sizeSpecs[size];
+  const { diameter, stroke: stroke2, gap, valueClass } = sizeSpecs[size];
   const center = diameter / 2;
   const rings = series.map((s2, i) => {
-    const geo = ringGeometry(diameter, stroke, s2.value, { ringIndex: i, ringGap: gap });
+    const geo = ringGeometry(diameter, stroke2, s2.value, { ringIndex: i, ringGap: gap });
     const strokeClass = DEFAULT_STROKE_CLASSES[i % DEFAULT_STROKE_CLASSES.length];
     return { radius: geo.radius, circumference: geo.circumference, filled: geo.filled, strokeClass, custom: s2.color };
   });
@@ -4960,7 +4964,7 @@ function ActivityGauge({
               r: r2.radius,
               fill: "none",
               className: TRACK_STROKE_CLASS,
-              strokeWidth: stroke
+              strokeWidth: stroke2
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4972,7 +4976,7 @@ function ActivityGauge({
               fill: "none",
               className: clsx_default(!r2.custom && r2.strokeClass),
               stroke: r2.custom,
-              strokeWidth: stroke,
+              strokeWidth: stroke2,
               strokeLinecap: "round",
               strokeDasharray: `${r2.filled} ${r2.circumference - r2.filled}`
             }
@@ -15772,15 +15776,15 @@ var getMainColorOfGraphicItem = function getMainColorOfGraphicItem2(item) {
   var _item$type;
   var _ref = item, displayName = _ref.type.displayName;
   var defaultedProps = (_item$type = item.type) !== null && _item$type !== void 0 && _item$type.defaultProps ? _objectSpread10(_objectSpread10({}, item.type.defaultProps), item.props) : item.props;
-  var stroke = defaultedProps.stroke, fill = defaultedProps.fill;
+  var stroke2 = defaultedProps.stroke, fill = defaultedProps.fill;
   var result;
   switch (displayName) {
     case "Line":
-      result = stroke;
+      result = stroke2;
       break;
     case "Area":
     case "Radar":
-      result = stroke && stroke !== "none" ? stroke : fill;
+      result = stroke2 && stroke2 !== "none" ? stroke2 : fill;
       break;
     default:
       result = fill;
@@ -20290,7 +20294,7 @@ var PolarRadiusAxis = /* @__PURE__ */ (function(_PureComponent) {
     key: "renderTicks",
     value: function renderTicks() {
       var _this = this;
-      var _this$props4 = this.props, ticks2 = _this$props4.ticks, tick = _this$props4.tick, angle = _this$props4.angle, tickFormatter = _this$props4.tickFormatter, stroke = _this$props4.stroke, others = _objectWithoutProperties14(_this$props4, _excluded24);
+      var _this$props4 = this.props, ticks2 = _this$props4.ticks, tick = _this$props4.tick, angle = _this$props4.angle, tickFormatter = _this$props4.tickFormatter, stroke2 = _this$props4.stroke, others = _objectWithoutProperties14(_this$props4, _excluded24);
       var textAnchor = this.getTickTextAnchor();
       var axisProps = filterProps(others, false);
       var customTickProps = filterProps(tick, false);
@@ -20301,7 +20305,7 @@ var PolarRadiusAxis = /* @__PURE__ */ (function(_PureComponent) {
           transform: "rotate(".concat(90 - angle, ", ").concat(coord.x, ", ").concat(coord.y, ")")
         }, axisProps), {}, {
           stroke: "none",
-          fill: stroke
+          fill: stroke2
         }, customTickProps), {}, {
           index: i
         }, coord), {}, {
@@ -20579,7 +20583,7 @@ var PolarAngleAxis = /* @__PURE__ */ (function(_PureComponent) {
     key: "renderTicks",
     value: function renderTicks() {
       var _this = this;
-      var _this$props3 = this.props, ticks2 = _this$props3.ticks, tick = _this$props3.tick, tickLine = _this$props3.tickLine, tickFormatter = _this$props3.tickFormatter, stroke = _this$props3.stroke;
+      var _this$props3 = this.props, ticks2 = _this$props3.ticks, tick = _this$props3.tick, tickLine = _this$props3.tickLine, tickFormatter = _this$props3.tickFormatter, stroke2 = _this$props3.stroke;
       var axisProps = filterProps(this.props, false);
       var customTickProps = filterProps(tick, false);
       var tickLineProps = _objectSpread23(_objectSpread23({}, axisProps), {}, {
@@ -20592,7 +20596,7 @@ var PolarAngleAxis = /* @__PURE__ */ (function(_PureComponent) {
           textAnchor
         }, axisProps), {}, {
           stroke: "none",
-          fill: stroke
+          fill: stroke2
         }, customTickProps), {}, {
           index: i,
           payload: entry,
@@ -22526,9 +22530,9 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
   }, {
     key: "renderBackground",
     value: function renderBackground() {
-      var _this$props6 = this.props, x2 = _this$props6.x, y2 = _this$props6.y, width = _this$props6.width, height = _this$props6.height, fill = _this$props6.fill, stroke = _this$props6.stroke;
+      var _this$props6 = this.props, x2 = _this$props6.x, y2 = _this$props6.y, width = _this$props6.width, height = _this$props6.height, fill = _this$props6.fill, stroke2 = _this$props6.stroke;
       return /* @__PURE__ */ React28__default.createElement("rect", {
-        stroke,
+        stroke: stroke2,
         fill,
         x: x2,
         y: y2,
@@ -22603,7 +22607,7 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
   }, {
     key: "renderSlide",
     value: function renderSlide(startX, endX) {
-      var _this$props9 = this.props, y2 = _this$props9.y, height = _this$props9.height, stroke = _this$props9.stroke, travellerWidth = _this$props9.travellerWidth;
+      var _this$props9 = this.props, y2 = _this$props9.y, height = _this$props9.height, stroke2 = _this$props9.stroke, travellerWidth = _this$props9.travellerWidth;
       var x2 = Math.min(startX, endX) + travellerWidth;
       var width = Math.max(Math.abs(endX - startX) - travellerWidth, 0);
       return /* @__PURE__ */ React28__default.createElement("rect", {
@@ -22616,7 +22620,7 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
           cursor: "move"
         },
         stroke: "none",
-        fill: stroke,
+        fill: stroke2,
         fillOpacity: 0.2,
         x: x2,
         y: y2,
@@ -22627,12 +22631,12 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
   }, {
     key: "renderText",
     value: function renderText() {
-      var _this$props10 = this.props, startIndex = _this$props10.startIndex, endIndex = _this$props10.endIndex, y2 = _this$props10.y, height = _this$props10.height, travellerWidth = _this$props10.travellerWidth, stroke = _this$props10.stroke;
+      var _this$props10 = this.props, startIndex = _this$props10.startIndex, endIndex = _this$props10.endIndex, y2 = _this$props10.y, height = _this$props10.height, travellerWidth = _this$props10.travellerWidth, stroke2 = _this$props10.stroke;
       var _this$state4 = this.state, startX = _this$state4.startX, endX = _this$state4.endX;
       var offset = 5;
       var attrs = {
         pointerEvents: "none",
-        fill: stroke
+        fill: stroke2
       };
       return /* @__PURE__ */ React28__default.createElement(Layer, {
         className: "recharts-brush-texts"
@@ -22669,14 +22673,14 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
   }], [{
     key: "renderDefaultTraveller",
     value: function renderDefaultTraveller(props) {
-      var x2 = props.x, y2 = props.y, width = props.width, height = props.height, stroke = props.stroke;
+      var x2 = props.x, y2 = props.y, width = props.width, height = props.height, stroke2 = props.stroke;
       var lineY = Math.floor(y2 + height / 2) - 1;
       return /* @__PURE__ */ React28__default.createElement(React28__default.Fragment, null, /* @__PURE__ */ React28__default.createElement("rect", {
         x: x2,
         y: y2,
         width,
         height,
-        fill: stroke,
+        fill: stroke2,
         stroke: "none"
       }), /* @__PURE__ */ React28__default.createElement("line", {
         x1: x2 + 1,
@@ -25191,7 +25195,7 @@ var CartesianAxis = /* @__PURE__ */ (function(_Component) {
        */
       function renderTicks(ticks2, fontSize, letterSpacing) {
         var _this2 = this;
-        var _this$props6 = this.props, tickLine = _this$props6.tickLine, stroke = _this$props6.stroke, tick = _this$props6.tick, tickFormatter = _this$props6.tickFormatter, unit2 = _this$props6.unit;
+        var _this$props6 = this.props, tickLine = _this$props6.tickLine, stroke2 = _this$props6.stroke, tick = _this$props6.tick, tickFormatter = _this$props6.tickFormatter, unit2 = _this$props6.unit;
         var finalTicks = getTicks(_objectSpread37(_objectSpread37({}, this.props), {}, {
           ticks: ticks2
         }), fontSize, letterSpacing);
@@ -25209,7 +25213,7 @@ var CartesianAxis = /* @__PURE__ */ (function(_Component) {
             verticalAnchor
           }, axisProps), {}, {
             stroke: "none",
-            fill: stroke
+            fill: stroke2
           }, customTickProps), tickCoord), {}, {
             index: i,
             payload: entry,
@@ -28901,13 +28905,13 @@ function ChartMini({
   className,
   style
 }) {
-  const stroke = resolveColor(color2, trend);
+  const stroke2 = resolveColor(color2, trend);
   return /* @__PURE__ */ jsx("div", { className, style: { width, height, ...style }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(LineChart, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, children: /* @__PURE__ */ jsx(
     Line2,
     {
       type: "monotone",
       dataKey: "value",
-      stroke,
+      stroke: stroke2,
       strokeWidth: 2,
       dot: false,
       isAnimationActive: false
@@ -31080,8 +31084,8 @@ function LoadingIndicator({
   if (variant === "dot-circle") {
     spinner = /* @__PURE__ */ jsx(DotCircle, { px });
   } else {
-    const stroke = borderPx[size];
-    const r2 = (px - stroke) / 2;
+    const stroke2 = borderPx[size];
+    const r2 = (px - stroke2) / 2;
     const c2 = 2 * Math.PI * r2;
     spinner = /* @__PURE__ */ jsxs(
       "svg",
@@ -31099,7 +31103,7 @@ function LoadingIndicator({
               r: r2,
               fill: "none",
               className: "stroke-bg-quaternary",
-              strokeWidth: stroke
+              strokeWidth: stroke2
             }
           ),
           /* @__PURE__ */ jsx(
@@ -31110,7 +31114,7 @@ function LoadingIndicator({
               r: r2,
               fill: "none",
               className: "stroke-fg-brand-primary",
-              strokeWidth: stroke,
+              strokeWidth: stroke2,
               strokeDasharray: c2,
               strokeDashoffset: c2 * 0.75,
               strokeLinecap: variant === "line-spinner" ? "round" : "butt"
@@ -32707,22 +32711,22 @@ function ProgressCircle({
   size = "xxs",
   className
 }) {
-  const { d, stroke, valueClass, labelClass } = SPECS[size];
+  const { d, stroke: stroke2, valueClass, labelClass } = SPECS[size];
   const isHalf = shape === "half";
-  const geo = ringGeometry(d, stroke, value, { arcFraction: isHalf ? 0.5 : 1 });
+  const geo = ringGeometry(d, stroke2, value, { arcFraction: isHalf ? 0.5 : 1 });
   const center = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
     label && /* @__PURE__ */ jsx("span", { className: clsx_default("font-medium text-text-tertiary", labelClass), children: label }),
     /* @__PURE__ */ jsx("span", { className: clsx_default("font-display font-semibold text-text-primary", valueClass), children: valueText ?? `${value}%` })
   ] });
   if (isHalf) {
-    const h = geo.center + stroke;
+    const h = geo.center + stroke2;
     return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", className), style: { width: d, height: h }, children: [
-      /* @__PURE__ */ jsx("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, className: "absolute left-0 top-0", role: "img", "aria-label": `${value}%`, children: /* @__PURE__ */ jsx("g", { transform: `rotate(180 ${geo.center} ${geo.center})`, children: /* @__PURE__ */ jsx(RingPair, { geo, stroke, trackClass: "stroke-bg-quaternary", progressClass: "stroke-fg-brand-primary" }) }) }),
+      /* @__PURE__ */ jsx("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, className: "absolute left-0 top-0", role: "img", "aria-label": `${value}%`, children: /* @__PURE__ */ jsx("g", { transform: `rotate(180 ${geo.center} ${geo.center})`, children: /* @__PURE__ */ jsx(RingPair, { geo, stroke: stroke2, trackClass: "stroke-bg-quaternary", progressClass: "stroke-fg-brand-primary" }) }) }),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2", children: center })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", className), style: { width: d, height: d }, children: [
-    /* @__PURE__ */ jsx("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, className: "block", role: "img", "aria-label": `${value}%`, children: /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${geo.center} ${geo.center})`, children: /* @__PURE__ */ jsx(RingPair, { geo, stroke, trackClass: "stroke-bg-quaternary", progressClass: "stroke-fg-brand-primary" }) }) }),
+    /* @__PURE__ */ jsx("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, className: "block", role: "img", "aria-label": `${value}%`, children: /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${geo.center} ${geo.center})`, children: /* @__PURE__ */ jsx(RingPair, { geo, stroke: stroke2, trackClass: "stroke-bg-quaternary", progressClass: "stroke-fg-brand-primary" }) }) }),
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: center })
   ] });
 }
@@ -33103,6 +33107,7 @@ function SidebarNavigation({
   logo,
   header,
   children,
+  panel,
   footer,
   open,
   onOpenChange,
@@ -33113,6 +33118,7 @@ function SidebarNavigation({
   const isOpen = open ?? internalOpen;
   const setOpen = (v) => onOpenChange ? onOpenChange(v) : setInternalOpen(v);
   const slim = type === "slim";
+  const dualTier = type === "dualTier";
   const rail = /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -33134,8 +33140,13 @@ function SidebarNavigation({
       ]
     }
   );
+  const panelEl = dualTier && panel ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-[256px] shrink-0 flex-col gap-xxs overflow-y-auto border-r border-border-secondary bg-bg-primary px-xl py-xl", children: panel }) : null;
+  const desktopRail = dualTier ? /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    rail,
+    panelEl
+  ] }) : rail;
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: rail }),
+    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: desktopRail }),
     /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
       /* @__PURE__ */ jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
       isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
@@ -33677,6 +33688,137 @@ function TextEditorTooltip({ children, className, ...rest }) {
     }
   );
 }
+function useTextEditor({
+  placeholder,
+  content,
+  editable = true,
+  onUpdate
+} = {}) {
+  return useEditor({
+    editable,
+    content: content ?? "",
+    extensions: [
+      StarterKit.configure({ link: { openOnClick: false } }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Placeholder.configure({ placeholder: placeholder ?? "" })
+    ],
+    onUpdate: ({ editor }) => onUpdate?.(editor.getHTML())
+  });
+}
+var stroke = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var ItalicIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M19 4h-9M14 20H5M15 4 9 20" }) });
+var UnderlineIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M6 4v6a6 6 0 0 0 12 0V4M4 21h16" }) });
+var StrikeIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M4 12h16M16 7.5A4 3 0 0 0 8 8M8 16.5a4 3 0 0 0 8-.5" }) });
+var HeadingIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M6 4v16M18 4v16M6 12h12" }) });
+var BulletListIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01" }) });
+var OrderedListIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M10 6h10M10 12h10M10 18h10M4 4v4M3 14h2l-2 3h2" }) });
+var proseClass = clsx_default(
+  "font-body text-sm text-text-primary",
+  "[&_.ProseMirror]:min-h-[80px] [&_.ProseMirror]:outline-none",
+  "[&_.ProseMirror_p]:my-0",
+  "[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-2xl",
+  "[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-2xl",
+  "[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-text-primary",
+  "[&_.ProseMirror_a]:text-text-brand-secondary [&_.ProseMirror_a]:underline",
+  // Placeholder (extension adds .is-editor-empty + data-placeholder).
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:pointer-events-none",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:float-left",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:h-0",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:text-text-placeholder",
+  "[&_.ProseMirror_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]"
+);
+function TextEditor({
+  placeholder,
+  content,
+  onUpdate,
+  disabled = false,
+  className
+}) {
+  const editor = useTextEditor({ placeholder, content, editable: !disabled, onUpdate });
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+  const isActive = (name, attrs) => editor?.isActive(name, attrs) ?? false;
+  const setLink = () => {
+    if (!editor) return;
+    const prev = editor.getAttributes("link").href ?? "";
+    const url = window.prompt("Link URL", prev);
+    if (url === null) return;
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (url === "") chain.unsetLink().run();
+    else chain.setLink({ href: url }).run();
+  };
+  const ToolbarButton = ({
+    label,
+    icon,
+    active,
+    onRun
+  }) => /* @__PURE__ */ jsx(
+    ButtonUtility,
+    {
+      variant: "ghost",
+      label,
+      icon: /* @__PURE__ */ jsx(IconBox, { size: 20, children: icon }),
+      "aria-pressed": active,
+      disabled: disabled || !editor,
+      className: active ? "!bg-bg-secondary !text-fg-secondary" : void 0,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: onRun
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "relative flex flex-col overflow-hidden rounded-xl border border-border-primary bg-bg-primary",
+        "focus-within:ring-2 focus-within:ring-border-brand",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(TextEditorToolbar, { className: "w-full !rounded-none !border-l-0 !border-r-0 !border-t-0 !shadow-none", children: [
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Bold", icon: /* @__PURE__ */ jsx(Bold01, {}), active: isActive("bold"), onRun: () => editor?.chain().focus().toggleBold().run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Italic", icon: /* @__PURE__ */ jsx(ItalicIcon, {}), active: isActive("italic"), onRun: () => editor?.chain().focus().toggleItalic().run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Underline", icon: /* @__PURE__ */ jsx(UnderlineIcon, {}), active: isActive("underline"), onRun: () => editor?.chain().focus().toggleUnderline().run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Strikethrough", icon: /* @__PURE__ */ jsx(StrikeIcon, {}), active: isActive("strike"), onRun: () => editor?.chain().focus().toggleStrike().run() }),
+          /* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Heading", icon: /* @__PURE__ */ jsx(HeadingIcon, {}), active: isActive("heading", { level: 2 }), onRun: () => editor?.chain().focus().toggleHeading({ level: 2 }).run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Bullet list", icon: /* @__PURE__ */ jsx(BulletListIcon, {}), active: isActive("bulletList"), onRun: () => editor?.chain().focus().toggleBulletList().run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Ordered list", icon: /* @__PURE__ */ jsx(OrderedListIcon, {}), active: isActive("orderedList"), onRun: () => editor?.chain().focus().toggleOrderedList().run() }),
+          /* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Align left", icon: /* @__PURE__ */ jsx(AlignLeft, {}), active: editor?.isActive({ textAlign: "left" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("left").run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Align center", icon: /* @__PURE__ */ jsx(AlignCenter, {}), active: editor?.isActive({ textAlign: "center" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("center").run() }),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Align right", icon: /* @__PURE__ */ jsx(AlignRight, {}), active: editor?.isActive({ textAlign: "right" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("right").run() }),
+          /* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
+          /* @__PURE__ */ jsx(ToolbarButton, { label: "Link", icon: /* @__PURE__ */ jsx(Link01, {}), active: isActive("link"), onRun: setLink })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative min-h-[120px] px-3xl py-2xl", children: [
+          /* @__PURE__ */ jsx(EditorContent, { editor, className: proseClass }),
+          editor?.isActive("link") && /* @__PURE__ */ jsxs(TextEditorTooltip, { className: "absolute right-3xl top-md z-10", children: [
+            /* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate px-xs text-xs text-text-secondary", children: String(editor.getAttributes("link").href ?? "") }),
+            /* @__PURE__ */ jsx(ButtonUtility, { variant: "ghost", size: "xs", label: "Edit link", icon: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(Link01, {}) }), onClick: setLink }),
+            /* @__PURE__ */ jsx(
+              ButtonUtility,
+              {
+                variant: "ghost",
+                size: "xs",
+                label: "Remove link",
+                icon: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(XClose$1, {}) }),
+                onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 function TextareaInputField({
   size = "md",
   label,
@@ -34051,6 +34193,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditor, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu, useTextEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -34,15 +34,25 @@
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "peerDependencies": {
+    "@borisj74/bv-ds-icons": ">=0.1.0",
+    "@tiptap/extension-placeholder": ">=2.0.0",
+    "@tiptap/extension-text-align": ">=2.0.0",
+    "@tiptap/react": ">=2.0.0",
+    "@tiptap/starter-kit": ">=2.0.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "@borisj74/bv-ds-icons": ">=0.1.0"
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@borisj74/bv-ds-icons": "^0.1.0",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/react-vite": "^8.0.0",
+    "@tiptap/extension-link": "^3.27.1",
+    "@tiptap/extension-placeholder": "^3.27.1",
+    "@tiptap/extension-text-align": "^3.27.1",
+    "@tiptap/extension-underline": "^3.27.1",
+    "@tiptap/react": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.0",