@borisj74/bv-ds 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +174 -37
- package/dist/index.d.cts +45 -1
- package/dist/index.d.ts +45 -1
- package/dist/index.js +174 -39
- package/package.json +13 -3
- package/src/components/TextEditor/TextEditor.tsx +175 -0
- package/src/components/TextEditor/index.ts +2 -0
- package/src/hooks/useTextEditor.ts +45 -0
- package/src/index.ts +4 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
|
|
3
|
+
import { Editor } from '@tiptap/react';
|
|
3
4
|
|
|
4
5
|
type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
|
|
5
6
|
interface ActivityFeedProps {
|
|
@@ -2675,6 +2676,25 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
2675
2676
|
*/
|
|
2676
2677
|
declare function Tag({ size, children, icon, checkbox, checked, onCheckedChange, count, onClose, className, ...rest }: TagProps): react.JSX.Element;
|
|
2677
2678
|
|
|
2679
|
+
interface TextEditorProps {
|
|
2680
|
+
placeholder?: string;
|
|
2681
|
+
/** Initial HTML content. */
|
|
2682
|
+
content?: string;
|
|
2683
|
+
/** Fires with serialized HTML on every change. */
|
|
2684
|
+
onUpdate?: (html: string) => void;
|
|
2685
|
+
disabled?: boolean;
|
|
2686
|
+
className?: string;
|
|
2687
|
+
}
|
|
2688
|
+
/**
|
|
2689
|
+
* Rich-text editor — composes the `TextEditorToolbar` / `TextEditorTooltip`
|
|
2690
|
+
* chrome shells onto a TipTap editor (`useTextEditor`). The toolbar buttons map
|
|
2691
|
+
* to TipTap commands and reflect `editor.isActive(...)`; a `TextEditorTooltip`
|
|
2692
|
+
* surfaces link controls when the caret sits inside a link.
|
|
2693
|
+
*
|
|
2694
|
+
* Pass `content` as initial HTML and read changes via `onUpdate(html)`.
|
|
2695
|
+
*/
|
|
2696
|
+
declare function TextEditor({ placeholder, content, onUpdate, disabled, className, }: TextEditorProps): react.JSX.Element;
|
|
2697
|
+
|
|
2678
2698
|
interface TextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
2679
2699
|
/** Toolbar controls — typically `ButtonUtility` groups. */
|
|
2680
2700
|
children?: ReactNode;
|
|
@@ -2832,6 +2852,30 @@ interface VerificationCodeInputProps {
|
|
|
2832
2852
|
*/
|
|
2833
2853
|
declare function VerificationCodeInput({ digits, value, onChange, size, label, hint, destructive, disabled, className, "aria-label": ariaLabel, }: VerificationCodeInputProps): react.JSX.Element;
|
|
2834
2854
|
|
|
2855
|
+
interface UseTextEditorOptions {
|
|
2856
|
+
/** Placeholder shown while the document is empty. */
|
|
2857
|
+
placeholder?: string;
|
|
2858
|
+
/** Initial HTML content. */
|
|
2859
|
+
content?: string;
|
|
2860
|
+
/** Whether the editor is editable (default `true`). */
|
|
2861
|
+
editable?: boolean;
|
|
2862
|
+
/** Fires with the serialized HTML on every change. */
|
|
2863
|
+
onUpdate?: (html: string) => void;
|
|
2864
|
+
}
|
|
2865
|
+
/**
|
|
2866
|
+
* Thin wrapper around TipTap's `useEditor`, pre-configured with the standard
|
|
2867
|
+
* extension set: StarterKit (bold/italic/strike/code/heading/lists — and, in
|
|
2868
|
+
* TipTap v3, **underline + link**), TextAlign (left/center/right) and
|
|
2869
|
+
* Placeholder. Link is configured `openOnClick: false` via StarterKit.
|
|
2870
|
+
*
|
|
2871
|
+
* Note: Underline and Link ship inside StarterKit v3, so they are NOT added as
|
|
2872
|
+
* separate extensions (doing so throws a duplicate-extension error).
|
|
2873
|
+
*
|
|
2874
|
+
* Returns the TipTap `Editor` (or `null` until mounted). Compose it with
|
|
2875
|
+
* `EditorContent` + the toolbar, or use the `TextEditor` composite.
|
|
2876
|
+
*/
|
|
2877
|
+
declare function useTextEditor({ placeholder, content, editable, onUpdate, }?: UseTextEditorOptions): Editor | null;
|
|
2878
|
+
|
|
2835
2879
|
/** Line-art cloud illustration (empty-state / upload). Color via `currentColor`. */
|
|
2836
2880
|
declare function CloudIllustration({ className, ...props }: SVGProps<SVGSVGElement>): react.JSX.Element;
|
|
2837
2881
|
|
|
@@ -2852,4 +2896,4 @@ declare namespace index {
|
|
|
2852
2896
|
export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
|
|
2853
2897
|
}
|
|
2854
2898
|
|
|
2855
|
-
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 };
|
|
2899
|
+
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
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import * as React28 from 'react';
|
|
2
2
|
import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
|
|
3
3
|
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
4
|
-
import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02 } from '@borisj74/bv-ds-icons';
|
|
4
|
+
import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01 } from '@borisj74/bv-ds-icons';
|
|
5
|
+
import { useEditor, EditorContent } from '@tiptap/react';
|
|
6
|
+
import { StarterKit } from '@tiptap/starter-kit';
|
|
7
|
+
import { TextAlign } from '@tiptap/extension-text-align';
|
|
8
|
+
import { Placeholder } from '@tiptap/extension-placeholder';
|
|
5
9
|
|
|
6
10
|
var __create = Object.create;
|
|
7
11
|
var __defProp = Object.defineProperty;
|
|
@@ -4863,10 +4867,10 @@ function ActivityFeed({
|
|
|
4863
4867
|
}
|
|
4864
4868
|
);
|
|
4865
4869
|
}
|
|
4866
|
-
function ringGeometry(diameter,
|
|
4870
|
+
function ringGeometry(diameter, stroke2, value, opts = {}) {
|
|
4867
4871
|
const { ringIndex = 0, ringGap = 0, arcFraction = 1 } = opts;
|
|
4868
4872
|
const center = diameter / 2;
|
|
4869
|
-
const radius = center -
|
|
4873
|
+
const radius = center - stroke2 / 2 - ringIndex * (stroke2 + ringGap);
|
|
4870
4874
|
const circumference = 2 * Math.PI * radius;
|
|
4871
4875
|
const arc = circumference * arcFraction;
|
|
4872
4876
|
const filled = Math.max(0, Math.min(100, value)) / 100 * arc;
|
|
@@ -4874,7 +4878,7 @@ function ringGeometry(diameter, stroke, value, opts = {}) {
|
|
|
4874
4878
|
}
|
|
4875
4879
|
function RingPair({
|
|
4876
4880
|
geo,
|
|
4877
|
-
stroke,
|
|
4881
|
+
stroke: stroke2,
|
|
4878
4882
|
trackClass = "stroke-utility-neutral-100",
|
|
4879
4883
|
progressClass,
|
|
4880
4884
|
progressColor,
|
|
@@ -4890,7 +4894,7 @@ function RingPair({
|
|
|
4890
4894
|
r: radius,
|
|
4891
4895
|
fill: "none",
|
|
4892
4896
|
className: trackClass,
|
|
4893
|
-
strokeWidth:
|
|
4897
|
+
strokeWidth: stroke2,
|
|
4894
4898
|
strokeDasharray: `${arc} ${circumference}`
|
|
4895
4899
|
}
|
|
4896
4900
|
),
|
|
@@ -4903,7 +4907,7 @@ function RingPair({
|
|
|
4903
4907
|
fill: "none",
|
|
4904
4908
|
className: clsx_default(!progressColor && progressClass),
|
|
4905
4909
|
stroke: progressColor,
|
|
4906
|
-
strokeWidth:
|
|
4910
|
+
strokeWidth: stroke2,
|
|
4907
4911
|
strokeLinecap: linecap,
|
|
4908
4912
|
strokeDasharray: `${filled} ${circumference}`
|
|
4909
4913
|
}
|
|
@@ -4935,10 +4939,10 @@ function ActivityGauge({
|
|
|
4935
4939
|
legend = "none",
|
|
4936
4940
|
className
|
|
4937
4941
|
}) {
|
|
4938
|
-
const { diameter, stroke, gap, valueClass } = sizeSpecs[size];
|
|
4942
|
+
const { diameter, stroke: stroke2, gap, valueClass } = sizeSpecs[size];
|
|
4939
4943
|
const center = diameter / 2;
|
|
4940
4944
|
const rings = series.map((s2, i) => {
|
|
4941
|
-
const geo = ringGeometry(diameter,
|
|
4945
|
+
const geo = ringGeometry(diameter, stroke2, s2.value, { ringIndex: i, ringGap: gap });
|
|
4942
4946
|
const strokeClass = DEFAULT_STROKE_CLASSES[i % DEFAULT_STROKE_CLASSES.length];
|
|
4943
4947
|
return { radius: geo.radius, circumference: geo.circumference, filled: geo.filled, strokeClass, custom: s2.color };
|
|
4944
4948
|
});
|
|
@@ -4960,7 +4964,7 @@ function ActivityGauge({
|
|
|
4960
4964
|
r: r2.radius,
|
|
4961
4965
|
fill: "none",
|
|
4962
4966
|
className: TRACK_STROKE_CLASS,
|
|
4963
|
-
strokeWidth:
|
|
4967
|
+
strokeWidth: stroke2
|
|
4964
4968
|
}
|
|
4965
4969
|
),
|
|
4966
4970
|
/* @__PURE__ */ jsx(
|
|
@@ -4972,7 +4976,7 @@ function ActivityGauge({
|
|
|
4972
4976
|
fill: "none",
|
|
4973
4977
|
className: clsx_default(!r2.custom && r2.strokeClass),
|
|
4974
4978
|
stroke: r2.custom,
|
|
4975
|
-
strokeWidth:
|
|
4979
|
+
strokeWidth: stroke2,
|
|
4976
4980
|
strokeLinecap: "round",
|
|
4977
4981
|
strokeDasharray: `${r2.filled} ${r2.circumference - r2.filled}`
|
|
4978
4982
|
}
|
|
@@ -15772,15 +15776,15 @@ var getMainColorOfGraphicItem = function getMainColorOfGraphicItem2(item) {
|
|
|
15772
15776
|
var _item$type;
|
|
15773
15777
|
var _ref = item, displayName = _ref.type.displayName;
|
|
15774
15778
|
var defaultedProps = (_item$type = item.type) !== null && _item$type !== void 0 && _item$type.defaultProps ? _objectSpread10(_objectSpread10({}, item.type.defaultProps), item.props) : item.props;
|
|
15775
|
-
var
|
|
15779
|
+
var stroke2 = defaultedProps.stroke, fill = defaultedProps.fill;
|
|
15776
15780
|
var result;
|
|
15777
15781
|
switch (displayName) {
|
|
15778
15782
|
case "Line":
|
|
15779
|
-
result =
|
|
15783
|
+
result = stroke2;
|
|
15780
15784
|
break;
|
|
15781
15785
|
case "Area":
|
|
15782
15786
|
case "Radar":
|
|
15783
|
-
result =
|
|
15787
|
+
result = stroke2 && stroke2 !== "none" ? stroke2 : fill;
|
|
15784
15788
|
break;
|
|
15785
15789
|
default:
|
|
15786
15790
|
result = fill;
|
|
@@ -20290,7 +20294,7 @@ var PolarRadiusAxis = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
20290
20294
|
key: "renderTicks",
|
|
20291
20295
|
value: function renderTicks() {
|
|
20292
20296
|
var _this = this;
|
|
20293
|
-
var _this$props4 = this.props, ticks2 = _this$props4.ticks, tick = _this$props4.tick, angle = _this$props4.angle, tickFormatter = _this$props4.tickFormatter,
|
|
20297
|
+
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);
|
|
20294
20298
|
var textAnchor = this.getTickTextAnchor();
|
|
20295
20299
|
var axisProps = filterProps(others, false);
|
|
20296
20300
|
var customTickProps = filterProps(tick, false);
|
|
@@ -20301,7 +20305,7 @@ var PolarRadiusAxis = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
20301
20305
|
transform: "rotate(".concat(90 - angle, ", ").concat(coord.x, ", ").concat(coord.y, ")")
|
|
20302
20306
|
}, axisProps), {}, {
|
|
20303
20307
|
stroke: "none",
|
|
20304
|
-
fill:
|
|
20308
|
+
fill: stroke2
|
|
20305
20309
|
}, customTickProps), {}, {
|
|
20306
20310
|
index: i
|
|
20307
20311
|
}, coord), {}, {
|
|
@@ -20579,7 +20583,7 @@ var PolarAngleAxis = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
20579
20583
|
key: "renderTicks",
|
|
20580
20584
|
value: function renderTicks() {
|
|
20581
20585
|
var _this = this;
|
|
20582
|
-
var _this$props3 = this.props, ticks2 = _this$props3.ticks, tick = _this$props3.tick, tickLine = _this$props3.tickLine, tickFormatter = _this$props3.tickFormatter,
|
|
20586
|
+
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;
|
|
20583
20587
|
var axisProps = filterProps(this.props, false);
|
|
20584
20588
|
var customTickProps = filterProps(tick, false);
|
|
20585
20589
|
var tickLineProps = _objectSpread23(_objectSpread23({}, axisProps), {}, {
|
|
@@ -20592,7 +20596,7 @@ var PolarAngleAxis = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
20592
20596
|
textAnchor
|
|
20593
20597
|
}, axisProps), {}, {
|
|
20594
20598
|
stroke: "none",
|
|
20595
|
-
fill:
|
|
20599
|
+
fill: stroke2
|
|
20596
20600
|
}, customTickProps), {}, {
|
|
20597
20601
|
index: i,
|
|
20598
20602
|
payload: entry,
|
|
@@ -22526,9 +22530,9 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
22526
22530
|
}, {
|
|
22527
22531
|
key: "renderBackground",
|
|
22528
22532
|
value: function renderBackground() {
|
|
22529
|
-
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,
|
|
22533
|
+
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;
|
|
22530
22534
|
return /* @__PURE__ */ React28__default.createElement("rect", {
|
|
22531
|
-
stroke,
|
|
22535
|
+
stroke: stroke2,
|
|
22532
22536
|
fill,
|
|
22533
22537
|
x: x2,
|
|
22534
22538
|
y: y2,
|
|
@@ -22603,7 +22607,7 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
22603
22607
|
}, {
|
|
22604
22608
|
key: "renderSlide",
|
|
22605
22609
|
value: function renderSlide(startX, endX) {
|
|
22606
|
-
var _this$props9 = this.props, y2 = _this$props9.y, height = _this$props9.height,
|
|
22610
|
+
var _this$props9 = this.props, y2 = _this$props9.y, height = _this$props9.height, stroke2 = _this$props9.stroke, travellerWidth = _this$props9.travellerWidth;
|
|
22607
22611
|
var x2 = Math.min(startX, endX) + travellerWidth;
|
|
22608
22612
|
var width = Math.max(Math.abs(endX - startX) - travellerWidth, 0);
|
|
22609
22613
|
return /* @__PURE__ */ React28__default.createElement("rect", {
|
|
@@ -22616,7 +22620,7 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
22616
22620
|
cursor: "move"
|
|
22617
22621
|
},
|
|
22618
22622
|
stroke: "none",
|
|
22619
|
-
fill:
|
|
22623
|
+
fill: stroke2,
|
|
22620
22624
|
fillOpacity: 0.2,
|
|
22621
22625
|
x: x2,
|
|
22622
22626
|
y: y2,
|
|
@@ -22627,12 +22631,12 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
22627
22631
|
}, {
|
|
22628
22632
|
key: "renderText",
|
|
22629
22633
|
value: function renderText() {
|
|
22630
|
-
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,
|
|
22634
|
+
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;
|
|
22631
22635
|
var _this$state4 = this.state, startX = _this$state4.startX, endX = _this$state4.endX;
|
|
22632
22636
|
var offset = 5;
|
|
22633
22637
|
var attrs = {
|
|
22634
22638
|
pointerEvents: "none",
|
|
22635
|
-
fill:
|
|
22639
|
+
fill: stroke2
|
|
22636
22640
|
};
|
|
22637
22641
|
return /* @__PURE__ */ React28__default.createElement(Layer, {
|
|
22638
22642
|
className: "recharts-brush-texts"
|
|
@@ -22669,14 +22673,14 @@ var Brush = /* @__PURE__ */ (function(_PureComponent) {
|
|
|
22669
22673
|
}], [{
|
|
22670
22674
|
key: "renderDefaultTraveller",
|
|
22671
22675
|
value: function renderDefaultTraveller(props) {
|
|
22672
|
-
var x2 = props.x, y2 = props.y, width = props.width, height = props.height,
|
|
22676
|
+
var x2 = props.x, y2 = props.y, width = props.width, height = props.height, stroke2 = props.stroke;
|
|
22673
22677
|
var lineY = Math.floor(y2 + height / 2) - 1;
|
|
22674
22678
|
return /* @__PURE__ */ React28__default.createElement(React28__default.Fragment, null, /* @__PURE__ */ React28__default.createElement("rect", {
|
|
22675
22679
|
x: x2,
|
|
22676
22680
|
y: y2,
|
|
22677
22681
|
width,
|
|
22678
22682
|
height,
|
|
22679
|
-
fill:
|
|
22683
|
+
fill: stroke2,
|
|
22680
22684
|
stroke: "none"
|
|
22681
22685
|
}), /* @__PURE__ */ React28__default.createElement("line", {
|
|
22682
22686
|
x1: x2 + 1,
|
|
@@ -25191,7 +25195,7 @@ var CartesianAxis = /* @__PURE__ */ (function(_Component) {
|
|
|
25191
25195
|
*/
|
|
25192
25196
|
function renderTicks(ticks2, fontSize, letterSpacing) {
|
|
25193
25197
|
var _this2 = this;
|
|
25194
|
-
var _this$props6 = this.props, tickLine = _this$props6.tickLine,
|
|
25198
|
+
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;
|
|
25195
25199
|
var finalTicks = getTicks(_objectSpread37(_objectSpread37({}, this.props), {}, {
|
|
25196
25200
|
ticks: ticks2
|
|
25197
25201
|
}), fontSize, letterSpacing);
|
|
@@ -25209,7 +25213,7 @@ var CartesianAxis = /* @__PURE__ */ (function(_Component) {
|
|
|
25209
25213
|
verticalAnchor
|
|
25210
25214
|
}, axisProps), {}, {
|
|
25211
25215
|
stroke: "none",
|
|
25212
|
-
fill:
|
|
25216
|
+
fill: stroke2
|
|
25213
25217
|
}, customTickProps), tickCoord), {}, {
|
|
25214
25218
|
index: i,
|
|
25215
25219
|
payload: entry,
|
|
@@ -28901,13 +28905,13 @@ function ChartMini({
|
|
|
28901
28905
|
className,
|
|
28902
28906
|
style
|
|
28903
28907
|
}) {
|
|
28904
|
-
const
|
|
28908
|
+
const stroke2 = resolveColor(color2, trend);
|
|
28905
28909
|
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(
|
|
28906
28910
|
Line2,
|
|
28907
28911
|
{
|
|
28908
28912
|
type: "monotone",
|
|
28909
28913
|
dataKey: "value",
|
|
28910
|
-
stroke,
|
|
28914
|
+
stroke: stroke2,
|
|
28911
28915
|
strokeWidth: 2,
|
|
28912
28916
|
dot: false,
|
|
28913
28917
|
isAnimationActive: false
|
|
@@ -31080,8 +31084,8 @@ function LoadingIndicator({
|
|
|
31080
31084
|
if (variant === "dot-circle") {
|
|
31081
31085
|
spinner = /* @__PURE__ */ jsx(DotCircle, { px });
|
|
31082
31086
|
} else {
|
|
31083
|
-
const
|
|
31084
|
-
const r2 = (px -
|
|
31087
|
+
const stroke2 = borderPx[size];
|
|
31088
|
+
const r2 = (px - stroke2) / 2;
|
|
31085
31089
|
const c2 = 2 * Math.PI * r2;
|
|
31086
31090
|
spinner = /* @__PURE__ */ jsxs(
|
|
31087
31091
|
"svg",
|
|
@@ -31099,7 +31103,7 @@ function LoadingIndicator({
|
|
|
31099
31103
|
r: r2,
|
|
31100
31104
|
fill: "none",
|
|
31101
31105
|
className: "stroke-bg-quaternary",
|
|
31102
|
-
strokeWidth:
|
|
31106
|
+
strokeWidth: stroke2
|
|
31103
31107
|
}
|
|
31104
31108
|
),
|
|
31105
31109
|
/* @__PURE__ */ jsx(
|
|
@@ -31110,7 +31114,7 @@ function LoadingIndicator({
|
|
|
31110
31114
|
r: r2,
|
|
31111
31115
|
fill: "none",
|
|
31112
31116
|
className: "stroke-fg-brand-primary",
|
|
31113
|
-
strokeWidth:
|
|
31117
|
+
strokeWidth: stroke2,
|
|
31114
31118
|
strokeDasharray: c2,
|
|
31115
31119
|
strokeDashoffset: c2 * 0.75,
|
|
31116
31120
|
strokeLinecap: variant === "line-spinner" ? "round" : "butt"
|
|
@@ -32707,22 +32711,22 @@ function ProgressCircle({
|
|
|
32707
32711
|
size = "xxs",
|
|
32708
32712
|
className
|
|
32709
32713
|
}) {
|
|
32710
|
-
const { d, stroke, valueClass, labelClass } = SPECS[size];
|
|
32714
|
+
const { d, stroke: stroke2, valueClass, labelClass } = SPECS[size];
|
|
32711
32715
|
const isHalf = shape === "half";
|
|
32712
|
-
const geo = ringGeometry(d,
|
|
32716
|
+
const geo = ringGeometry(d, stroke2, value, { arcFraction: isHalf ? 0.5 : 1 });
|
|
32713
32717
|
const center = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
|
|
32714
32718
|
label && /* @__PURE__ */ jsx("span", { className: clsx_default("font-medium text-text-tertiary", labelClass), children: label }),
|
|
32715
32719
|
/* @__PURE__ */ jsx("span", { className: clsx_default("font-display font-semibold text-text-primary", valueClass), children: valueText ?? `${value}%` })
|
|
32716
32720
|
] });
|
|
32717
32721
|
if (isHalf) {
|
|
32718
|
-
const h = geo.center +
|
|
32722
|
+
const h = geo.center + stroke2;
|
|
32719
32723
|
return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", className), style: { width: d, height: h }, children: [
|
|
32720
|
-
/* @__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" }) }) }),
|
|
32724
|
+
/* @__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" }) }) }),
|
|
32721
32725
|
/* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2", children: center })
|
|
32722
32726
|
] });
|
|
32723
32727
|
}
|
|
32724
32728
|
return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", className), style: { width: d, height: d }, children: [
|
|
32725
|
-
/* @__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" }) }) }),
|
|
32729
|
+
/* @__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" }) }) }),
|
|
32726
32730
|
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: center })
|
|
32727
32731
|
] });
|
|
32728
32732
|
}
|
|
@@ -33684,6 +33688,137 @@ function TextEditorTooltip({ children, className, ...rest }) {
|
|
|
33684
33688
|
}
|
|
33685
33689
|
);
|
|
33686
33690
|
}
|
|
33691
|
+
function useTextEditor({
|
|
33692
|
+
placeholder,
|
|
33693
|
+
content,
|
|
33694
|
+
editable = true,
|
|
33695
|
+
onUpdate
|
|
33696
|
+
} = {}) {
|
|
33697
|
+
return useEditor({
|
|
33698
|
+
editable,
|
|
33699
|
+
content: content ?? "",
|
|
33700
|
+
extensions: [
|
|
33701
|
+
StarterKit.configure({ link: { openOnClick: false } }),
|
|
33702
|
+
TextAlign.configure({ types: ["heading", "paragraph"] }),
|
|
33703
|
+
Placeholder.configure({ placeholder: placeholder ?? "" })
|
|
33704
|
+
],
|
|
33705
|
+
onUpdate: ({ editor }) => onUpdate?.(editor.getHTML())
|
|
33706
|
+
});
|
|
33707
|
+
}
|
|
33708
|
+
var stroke = {
|
|
33709
|
+
fill: "none",
|
|
33710
|
+
stroke: "currentColor",
|
|
33711
|
+
strokeWidth: 2,
|
|
33712
|
+
strokeLinecap: "round",
|
|
33713
|
+
strokeLinejoin: "round"
|
|
33714
|
+
};
|
|
33715
|
+
var ItalicIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M19 4h-9M14 20H5M15 4 9 20" }) });
|
|
33716
|
+
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" }) });
|
|
33717
|
+
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" }) });
|
|
33718
|
+
var HeadingIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M6 4v16M18 4v16M6 12h12" }) });
|
|
33719
|
+
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" }) });
|
|
33720
|
+
var OrderedListIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", ...stroke, children: /* @__PURE__ */ jsx("path", { d: "M10 6h10M10 12h10M10 18h10M4 4v4M3 14h2l-2 3h2" }) });
|
|
33721
|
+
var proseClass = clsx_default(
|
|
33722
|
+
"font-body text-sm text-text-primary",
|
|
33723
|
+
"[&_.ProseMirror]:min-h-[80px] [&_.ProseMirror]:outline-none",
|
|
33724
|
+
"[&_.ProseMirror_p]:my-0",
|
|
33725
|
+
"[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-2xl",
|
|
33726
|
+
"[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-2xl",
|
|
33727
|
+
"[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-text-primary",
|
|
33728
|
+
"[&_.ProseMirror_a]:text-text-brand-secondary [&_.ProseMirror_a]:underline",
|
|
33729
|
+
// Placeholder (extension adds .is-editor-empty + data-placeholder).
|
|
33730
|
+
"[&_.ProseMirror_p.is-editor-empty:first-child]:before:pointer-events-none",
|
|
33731
|
+
"[&_.ProseMirror_p.is-editor-empty:first-child]:before:float-left",
|
|
33732
|
+
"[&_.ProseMirror_p.is-editor-empty:first-child]:before:h-0",
|
|
33733
|
+
"[&_.ProseMirror_p.is-editor-empty:first-child]:before:text-text-placeholder",
|
|
33734
|
+
"[&_.ProseMirror_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]"
|
|
33735
|
+
);
|
|
33736
|
+
function TextEditor({
|
|
33737
|
+
placeholder,
|
|
33738
|
+
content,
|
|
33739
|
+
onUpdate,
|
|
33740
|
+
disabled = false,
|
|
33741
|
+
className
|
|
33742
|
+
}) {
|
|
33743
|
+
const editor = useTextEditor({ placeholder, content, editable: !disabled, onUpdate });
|
|
33744
|
+
useEffect(() => {
|
|
33745
|
+
editor?.setEditable(!disabled);
|
|
33746
|
+
}, [editor, disabled]);
|
|
33747
|
+
const isActive = (name, attrs) => editor?.isActive(name, attrs) ?? false;
|
|
33748
|
+
const setLink = () => {
|
|
33749
|
+
if (!editor) return;
|
|
33750
|
+
const prev = editor.getAttributes("link").href ?? "";
|
|
33751
|
+
const url = window.prompt("Link URL", prev);
|
|
33752
|
+
if (url === null) return;
|
|
33753
|
+
const chain = editor.chain().focus().extendMarkRange("link");
|
|
33754
|
+
if (url === "") chain.unsetLink().run();
|
|
33755
|
+
else chain.setLink({ href: url }).run();
|
|
33756
|
+
};
|
|
33757
|
+
const ToolbarButton = ({
|
|
33758
|
+
label,
|
|
33759
|
+
icon,
|
|
33760
|
+
active,
|
|
33761
|
+
onRun
|
|
33762
|
+
}) => /* @__PURE__ */ jsx(
|
|
33763
|
+
ButtonUtility,
|
|
33764
|
+
{
|
|
33765
|
+
variant: "ghost",
|
|
33766
|
+
label,
|
|
33767
|
+
icon: /* @__PURE__ */ jsx(IconBox, { size: 20, children: icon }),
|
|
33768
|
+
"aria-pressed": active,
|
|
33769
|
+
disabled: disabled || !editor,
|
|
33770
|
+
className: active ? "!bg-bg-secondary !text-fg-secondary" : void 0,
|
|
33771
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
33772
|
+
onClick: onRun
|
|
33773
|
+
}
|
|
33774
|
+
);
|
|
33775
|
+
return /* @__PURE__ */ jsxs(
|
|
33776
|
+
"div",
|
|
33777
|
+
{
|
|
33778
|
+
className: clsx_default(
|
|
33779
|
+
"relative flex flex-col overflow-hidden rounded-xl border border-border-primary bg-bg-primary",
|
|
33780
|
+
"focus-within:ring-2 focus-within:ring-border-brand",
|
|
33781
|
+
disabled && "opacity-60",
|
|
33782
|
+
className
|
|
33783
|
+
),
|
|
33784
|
+
children: [
|
|
33785
|
+
/* @__PURE__ */ jsxs(TextEditorToolbar, { className: "w-full !rounded-none !border-l-0 !border-r-0 !border-t-0 !shadow-none", children: [
|
|
33786
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Bold", icon: /* @__PURE__ */ jsx(Bold01, {}), active: isActive("bold"), onRun: () => editor?.chain().focus().toggleBold().run() }),
|
|
33787
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Italic", icon: /* @__PURE__ */ jsx(ItalicIcon, {}), active: isActive("italic"), onRun: () => editor?.chain().focus().toggleItalic().run() }),
|
|
33788
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Underline", icon: /* @__PURE__ */ jsx(UnderlineIcon, {}), active: isActive("underline"), onRun: () => editor?.chain().focus().toggleUnderline().run() }),
|
|
33789
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Strikethrough", icon: /* @__PURE__ */ jsx(StrikeIcon, {}), active: isActive("strike"), onRun: () => editor?.chain().focus().toggleStrike().run() }),
|
|
33790
|
+
/* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
|
|
33791
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Heading", icon: /* @__PURE__ */ jsx(HeadingIcon, {}), active: isActive("heading", { level: 2 }), onRun: () => editor?.chain().focus().toggleHeading({ level: 2 }).run() }),
|
|
33792
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Bullet list", icon: /* @__PURE__ */ jsx(BulletListIcon, {}), active: isActive("bulletList"), onRun: () => editor?.chain().focus().toggleBulletList().run() }),
|
|
33793
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Ordered list", icon: /* @__PURE__ */ jsx(OrderedListIcon, {}), active: isActive("orderedList"), onRun: () => editor?.chain().focus().toggleOrderedList().run() }),
|
|
33794
|
+
/* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
|
|
33795
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Align left", icon: /* @__PURE__ */ jsx(AlignLeft, {}), active: editor?.isActive({ textAlign: "left" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("left").run() }),
|
|
33796
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Align center", icon: /* @__PURE__ */ jsx(AlignCenter, {}), active: editor?.isActive({ textAlign: "center" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("center").run() }),
|
|
33797
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Align right", icon: /* @__PURE__ */ jsx(AlignRight, {}), active: editor?.isActive({ textAlign: "right" }) ?? false, onRun: () => editor?.chain().focus().setTextAlign("right").run() }),
|
|
33798
|
+
/* @__PURE__ */ jsx(TextEditorToolbarDivider, {}),
|
|
33799
|
+
/* @__PURE__ */ jsx(ToolbarButton, { label: "Link", icon: /* @__PURE__ */ jsx(Link01, {}), active: isActive("link"), onRun: setLink })
|
|
33800
|
+
] }),
|
|
33801
|
+
/* @__PURE__ */ jsxs("div", { className: "relative min-h-[120px] px-3xl py-2xl", children: [
|
|
33802
|
+
/* @__PURE__ */ jsx(EditorContent, { editor, className: proseClass }),
|
|
33803
|
+
editor?.isActive("link") && /* @__PURE__ */ jsxs(TextEditorTooltip, { className: "absolute right-3xl top-md z-10", children: [
|
|
33804
|
+
/* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate px-xs text-xs text-text-secondary", children: String(editor.getAttributes("link").href ?? "") }),
|
|
33805
|
+
/* @__PURE__ */ jsx(ButtonUtility, { variant: "ghost", size: "xs", label: "Edit link", icon: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(Link01, {}) }), onClick: setLink }),
|
|
33806
|
+
/* @__PURE__ */ jsx(
|
|
33807
|
+
ButtonUtility,
|
|
33808
|
+
{
|
|
33809
|
+
variant: "ghost",
|
|
33810
|
+
size: "xs",
|
|
33811
|
+
label: "Remove link",
|
|
33812
|
+
icon: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(XClose$1, {}) }),
|
|
33813
|
+
onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run()
|
|
33814
|
+
}
|
|
33815
|
+
)
|
|
33816
|
+
] })
|
|
33817
|
+
] })
|
|
33818
|
+
]
|
|
33819
|
+
}
|
|
33820
|
+
);
|
|
33821
|
+
}
|
|
33687
33822
|
function TextareaInputField({
|
|
33688
33823
|
size = "md",
|
|
33689
33824
|
label,
|
|
@@ -34058,6 +34193,6 @@ object-assign/index.js:
|
|
|
34058
34193
|
*)
|
|
34059
34194
|
*/
|
|
34060
34195
|
|
|
34061
|
-
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 };
|
|
34196
|
+
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 };
|
|
34062
34197
|
//# sourceMappingURL=index.js.map
|
|
34063
34198
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@borisj74/bv-ds",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -34,15 +34,25 @@
|
|
|
34
34
|
"prepublishOnly": "npm run typecheck && npm run build"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
+
"@borisj74/bv-ds-icons": ">=0.1.0",
|
|
38
|
+
"@tiptap/extension-placeholder": ">=2.0.0",
|
|
39
|
+
"@tiptap/extension-text-align": ">=2.0.0",
|
|
40
|
+
"@tiptap/react": ">=2.0.0",
|
|
41
|
+
"@tiptap/starter-kit": ">=2.0.0",
|
|
37
42
|
"react": ">=18.0.0",
|
|
38
|
-
"react-dom": ">=18.0.0"
|
|
39
|
-
"@borisj74/bv-ds-icons": ">=0.1.0"
|
|
43
|
+
"react-dom": ">=18.0.0"
|
|
40
44
|
},
|
|
41
45
|
"devDependencies": {
|
|
42
46
|
"@borisj74/bv-ds-icons": "^0.1.0",
|
|
43
47
|
"@storybook/addon-a11y": "^8.0.0",
|
|
44
48
|
"@storybook/addon-essentials": "^8.6.14",
|
|
45
49
|
"@storybook/react-vite": "^8.0.0",
|
|
50
|
+
"@tiptap/extension-link": "^3.27.1",
|
|
51
|
+
"@tiptap/extension-placeholder": "^3.27.1",
|
|
52
|
+
"@tiptap/extension-text-align": "^3.27.1",
|
|
53
|
+
"@tiptap/extension-underline": "^3.27.1",
|
|
54
|
+
"@tiptap/react": "^3.27.1",
|
|
55
|
+
"@tiptap/starter-kit": "^3.27.1",
|
|
46
56
|
"@types/react": "^18.2.0",
|
|
47
57
|
"@types/react-dom": "^18.2.0",
|
|
48
58
|
"autoprefixer": "^10.4.0",
|