@scalably/ui 0.5.3 → 0.5.5

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.d.cts CHANGED
@@ -1262,6 +1262,60 @@ interface RadioGroupProps<T extends string = string> extends BaseFieldSetProps {
1262
1262
  */
1263
1263
  declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
1264
1264
 
1265
+ interface RatingBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
1266
+ }
1267
+ interface RatingProps extends RatingBaseProps {
1268
+ /** Current rating value (0 to maxStars, supports 0.5 increments) */
1269
+ value?: number;
1270
+ /** Default rating value for uncontrolled mode */
1271
+ defaultValue?: number;
1272
+ /** Callback fired when rating changes */
1273
+ onChange?: (stars: number) => void;
1274
+ /** Maximum number of stars. Defaults to 5. */
1275
+ maxStars?: number;
1276
+ /** Whether the rating is read-only */
1277
+ readOnly?: boolean;
1278
+ /** Size of the stars in pixels. Defaults to 24. */
1279
+ size?: number;
1280
+ /** Color class for filled stars. Defaults to text-yellow-500. */
1281
+ filledColor?: string;
1282
+ /** Color class for empty stars. Defaults to text-gray-300. */
1283
+ emptyColor?: string;
1284
+ /** Precision for rating steps. 1 for whole stars only, 0.5 for half stars. Defaults to 0.5. */
1285
+ precision?: 1 | 0.5;
1286
+ }
1287
+ /**
1288
+ * Rating - A star rating component with support for half-star ratings.
1289
+ *
1290
+ * Features:
1291
+ * - Support for 0.5 step increments (half stars) or whole stars only
1292
+ * - Configurable number of stars (default: 5)
1293
+ * - Hover preview (yellow stars on hover)
1294
+ * - Read-only mode
1295
+ * - Controlled and uncontrolled modes
1296
+ * - Full keyboard navigation and accessibility
1297
+ * - Smooth hover interactions
1298
+ *
1299
+ * @example
1300
+ * ```tsx
1301
+ * // Basic usage with half-star precision
1302
+ * <Rating onChange={(stars) => console.log(stars)} />
1303
+ *
1304
+ * // Whole stars only (precision=1)
1305
+ * <Rating precision={1} onChange={(stars) => setRating(stars)} />
1306
+ *
1307
+ * // With initial value
1308
+ * <Rating value={4.5} onChange={(stars) => setRating(stars)} />
1309
+ *
1310
+ * // Read-only display
1311
+ * <Rating value={4.5} readOnly />
1312
+ *
1313
+ * // Custom number of stars
1314
+ * <Rating maxStars={10} value={7.5} onChange={(stars) => setRating(stars)} />
1315
+ * ```
1316
+ */
1317
+ declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
1318
+
1265
1319
  type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
1266
1320
  interface SwitchProps extends BaseInputProps {
1267
1321
  /** Marks the field as invalid (error state). Applies error color styling. */
@@ -2327,6 +2381,14 @@ declare const WelcomeBackground: {
2327
2381
  displayName: string;
2328
2382
  };
2329
2383
 
2384
+ /**
2385
+ * Controls how the floating insert menu is triggered.
2386
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
2387
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
2388
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
2389
+ */
2390
+ type FloatingMenuTrigger = "slash" | "plus" | "both";
2391
+
2330
2392
  type ImageSourceMode = "both" | "url-only" | "upload-only";
2331
2393
  interface RichTextEditorProps {
2332
2394
  /** Controlled HTML value of the editor */
@@ -2416,6 +2478,92 @@ interface RichTextEditorProps {
2416
2478
  * @default undefined (Tiptap auto-detects, but you should explicitly set `false` for SSR)
2417
2479
  */
2418
2480
  immediatelyRender?: boolean;
2481
+ /**
2482
+ * When true, keeps the toolbar pinned to the top of the editor container
2483
+ * using CSS `position: sticky`.
2484
+ *
2485
+ * This is recommended for long documents so that structural tools (headings,
2486
+ * lists, tables, etc.) remain visible while scrolling.
2487
+ *
2488
+ * @default true
2489
+ */
2490
+ stickyToolbar?: boolean;
2491
+ /**
2492
+ * Optional offset in pixels applied to the sticky toolbar `top` value.
2493
+ *
2494
+ * This is useful when the host application has its own fixed header or
2495
+ * navigation bar. For example:
2496
+ *
2497
+ * - `stickyOffset={64}` to sit below a 64px app header
2498
+ *
2499
+ * @default 0
2500
+ */
2501
+ stickyOffset?: number;
2502
+ /**
2503
+ * When true, hides the toolbar completely while keeping the editor
2504
+ * content area and all other behaviors intact.
2505
+ *
2506
+ * This is useful for very minimal, writing-focused experiences or for
2507
+ * embedding the editor inside flows that provide their own external
2508
+ * formatting controls.
2509
+ *
2510
+ * @default false
2511
+ */
2512
+ hideToolbar?: boolean;
2513
+ /**
2514
+ * Controls whether the editor renders with its default rounded
2515
+ * border and background.
2516
+ *
2517
+ * - When `true` (default), the editor is wrapped in a rounded,
2518
+ * bordered container that responds to focus and error states.
2519
+ * - When `false`, the outer border and background are removed so
2520
+ * the editor can blend into custom host layouts (e.g. card
2521
+ * bodies, panels) while keeping all internal behaviors intact.
2522
+ *
2523
+ * Naming convention: `withBorder` mirrors many design systems.
2524
+ * For backward compatibility, `bordered` is still supported as
2525
+ * an alias; `withBorder` takes precedence when both are provided.
2526
+ */
2527
+ withBorder?: boolean;
2528
+ /**
2529
+ * Enables the inline Bubble Menu that appears above selected text.
2530
+ *
2531
+ * This menu is ideal for inline formatting operations such as bold, italic,
2532
+ * underline, and links. When disabled, the editor falls back to toolbar-only
2533
+ * controls.
2534
+ *
2535
+ * @default true
2536
+ */
2537
+ enableBubbleMenu?: boolean;
2538
+ /**
2539
+ * Enables the Floating Menu that appears near the current block/empty line
2540
+ * to insert structural blocks (images, dividers, quotes, tables, etc.).
2541
+ *
2542
+ * @default true
2543
+ */
2544
+ enableFloatingMenu?: boolean;
2545
+ /**
2546
+ * Optional fine-tuning offset (in pixels) applied to the gutter "+"
2547
+ * insert button alignment.
2548
+ *
2549
+ * In most cases you should not need this. The library automatically
2550
+ * derives a good vertical alignment from the paragraph's computed
2551
+ * line-height and font-size, but if your host app overrides
2552
+ * typography significantly (e.g. different base font-size or
2553
+ * custom line-height), you can use this to nudge the "+" icon up
2554
+ * or down to visually match your text baseline.
2555
+ */
2556
+ plusMenuYOffset?: number;
2557
+ /**
2558
+ * Controls how the floating insert menu is triggered:
2559
+ *
2560
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
2561
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
2562
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
2563
+ *
2564
+ * @default "both"
2565
+ */
2566
+ floatingMenuTriggers?: FloatingMenuTrigger;
2419
2567
  }
2420
2568
  /**
2421
2569
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -2469,7 +2617,7 @@ interface RichTextEditorProps {
2469
2617
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
2470
2618
  */
2471
2619
  declare const RichTextEditor: {
2472
- ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
2620
+ ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
2473
2621
  displayName: string;
2474
2622
  };
2475
2623
 
@@ -3287,6 +3435,33 @@ interface SettingsIconProps extends React.SVGProps<SVGSVGElement> {
3287
3435
  */
3288
3436
  declare const SettingsIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SettingsIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3289
3437
 
3438
+ /**
3439
+ * Props for the StarIcon component
3440
+ */
3441
+ interface StarIconProps extends React.SVGProps<SVGSVGElement> {
3442
+ /** Size of the icon in pixels. Defaults to 24. */
3443
+ size?: number;
3444
+ /** Additional CSS classes to apply to the icon */
3445
+ className?: string;
3446
+ /** Fill percentage (0-1) for partial star rendering. Defaults to 1 (full star). */
3447
+ fillPercentage?: number;
3448
+ }
3449
+ /**
3450
+ * Star icon component - displays a star shape.
3451
+ *
3452
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
3453
+ * Supports partial fill for half-star ratings.
3454
+ *
3455
+ * @example
3456
+ * ```tsx
3457
+ * import { StarIcon } from '@scalably/ui';
3458
+ *
3459
+ * <StarIcon size={24} className="sui-text-yellow-500" />
3460
+ * <StarIcon size={24} fillPercentage={0.5} className="sui-text-yellow-500" />
3461
+ * ```
3462
+ */
3463
+ declare const StarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<StarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3464
+
3290
3465
  /**
3291
3466
  * Props for the SuccessIcon component
3292
3467
  */
@@ -3958,4 +4133,4 @@ interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
3958
4133
  */
3959
4134
  declare const UnderlineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<UnderlineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3960
4135
 
3961
- export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
4136
+ export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
package/dist/index.d.ts CHANGED
@@ -1262,6 +1262,60 @@ interface RadioGroupProps<T extends string = string> extends BaseFieldSetProps {
1262
1262
  */
1263
1263
  declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
1264
1264
 
1265
+ interface RatingBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
1266
+ }
1267
+ interface RatingProps extends RatingBaseProps {
1268
+ /** Current rating value (0 to maxStars, supports 0.5 increments) */
1269
+ value?: number;
1270
+ /** Default rating value for uncontrolled mode */
1271
+ defaultValue?: number;
1272
+ /** Callback fired when rating changes */
1273
+ onChange?: (stars: number) => void;
1274
+ /** Maximum number of stars. Defaults to 5. */
1275
+ maxStars?: number;
1276
+ /** Whether the rating is read-only */
1277
+ readOnly?: boolean;
1278
+ /** Size of the stars in pixels. Defaults to 24. */
1279
+ size?: number;
1280
+ /** Color class for filled stars. Defaults to text-yellow-500. */
1281
+ filledColor?: string;
1282
+ /** Color class for empty stars. Defaults to text-gray-300. */
1283
+ emptyColor?: string;
1284
+ /** Precision for rating steps. 1 for whole stars only, 0.5 for half stars. Defaults to 0.5. */
1285
+ precision?: 1 | 0.5;
1286
+ }
1287
+ /**
1288
+ * Rating - A star rating component with support for half-star ratings.
1289
+ *
1290
+ * Features:
1291
+ * - Support for 0.5 step increments (half stars) or whole stars only
1292
+ * - Configurable number of stars (default: 5)
1293
+ * - Hover preview (yellow stars on hover)
1294
+ * - Read-only mode
1295
+ * - Controlled and uncontrolled modes
1296
+ * - Full keyboard navigation and accessibility
1297
+ * - Smooth hover interactions
1298
+ *
1299
+ * @example
1300
+ * ```tsx
1301
+ * // Basic usage with half-star precision
1302
+ * <Rating onChange={(stars) => console.log(stars)} />
1303
+ *
1304
+ * // Whole stars only (precision=1)
1305
+ * <Rating precision={1} onChange={(stars) => setRating(stars)} />
1306
+ *
1307
+ * // With initial value
1308
+ * <Rating value={4.5} onChange={(stars) => setRating(stars)} />
1309
+ *
1310
+ * // Read-only display
1311
+ * <Rating value={4.5} readOnly />
1312
+ *
1313
+ * // Custom number of stars
1314
+ * <Rating maxStars={10} value={7.5} onChange={(stars) => setRating(stars)} />
1315
+ * ```
1316
+ */
1317
+ declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
1318
+
1265
1319
  type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
1266
1320
  interface SwitchProps extends BaseInputProps {
1267
1321
  /** Marks the field as invalid (error state). Applies error color styling. */
@@ -2327,6 +2381,14 @@ declare const WelcomeBackground: {
2327
2381
  displayName: string;
2328
2382
  };
2329
2383
 
2384
+ /**
2385
+ * Controls how the floating insert menu is triggered.
2386
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
2387
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
2388
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
2389
+ */
2390
+ type FloatingMenuTrigger = "slash" | "plus" | "both";
2391
+
2330
2392
  type ImageSourceMode = "both" | "url-only" | "upload-only";
2331
2393
  interface RichTextEditorProps {
2332
2394
  /** Controlled HTML value of the editor */
@@ -2416,6 +2478,92 @@ interface RichTextEditorProps {
2416
2478
  * @default undefined (Tiptap auto-detects, but you should explicitly set `false` for SSR)
2417
2479
  */
2418
2480
  immediatelyRender?: boolean;
2481
+ /**
2482
+ * When true, keeps the toolbar pinned to the top of the editor container
2483
+ * using CSS `position: sticky`.
2484
+ *
2485
+ * This is recommended for long documents so that structural tools (headings,
2486
+ * lists, tables, etc.) remain visible while scrolling.
2487
+ *
2488
+ * @default true
2489
+ */
2490
+ stickyToolbar?: boolean;
2491
+ /**
2492
+ * Optional offset in pixels applied to the sticky toolbar `top` value.
2493
+ *
2494
+ * This is useful when the host application has its own fixed header or
2495
+ * navigation bar. For example:
2496
+ *
2497
+ * - `stickyOffset={64}` to sit below a 64px app header
2498
+ *
2499
+ * @default 0
2500
+ */
2501
+ stickyOffset?: number;
2502
+ /**
2503
+ * When true, hides the toolbar completely while keeping the editor
2504
+ * content area and all other behaviors intact.
2505
+ *
2506
+ * This is useful for very minimal, writing-focused experiences or for
2507
+ * embedding the editor inside flows that provide their own external
2508
+ * formatting controls.
2509
+ *
2510
+ * @default false
2511
+ */
2512
+ hideToolbar?: boolean;
2513
+ /**
2514
+ * Controls whether the editor renders with its default rounded
2515
+ * border and background.
2516
+ *
2517
+ * - When `true` (default), the editor is wrapped in a rounded,
2518
+ * bordered container that responds to focus and error states.
2519
+ * - When `false`, the outer border and background are removed so
2520
+ * the editor can blend into custom host layouts (e.g. card
2521
+ * bodies, panels) while keeping all internal behaviors intact.
2522
+ *
2523
+ * Naming convention: `withBorder` mirrors many design systems.
2524
+ * For backward compatibility, `bordered` is still supported as
2525
+ * an alias; `withBorder` takes precedence when both are provided.
2526
+ */
2527
+ withBorder?: boolean;
2528
+ /**
2529
+ * Enables the inline Bubble Menu that appears above selected text.
2530
+ *
2531
+ * This menu is ideal for inline formatting operations such as bold, italic,
2532
+ * underline, and links. When disabled, the editor falls back to toolbar-only
2533
+ * controls.
2534
+ *
2535
+ * @default true
2536
+ */
2537
+ enableBubbleMenu?: boolean;
2538
+ /**
2539
+ * Enables the Floating Menu that appears near the current block/empty line
2540
+ * to insert structural blocks (images, dividers, quotes, tables, etc.).
2541
+ *
2542
+ * @default true
2543
+ */
2544
+ enableFloatingMenu?: boolean;
2545
+ /**
2546
+ * Optional fine-tuning offset (in pixels) applied to the gutter "+"
2547
+ * insert button alignment.
2548
+ *
2549
+ * In most cases you should not need this. The library automatically
2550
+ * derives a good vertical alignment from the paragraph's computed
2551
+ * line-height and font-size, but if your host app overrides
2552
+ * typography significantly (e.g. different base font-size or
2553
+ * custom line-height), you can use this to nudge the "+" icon up
2554
+ * or down to visually match your text baseline.
2555
+ */
2556
+ plusMenuYOffset?: number;
2557
+ /**
2558
+ * Controls how the floating insert menu is triggered:
2559
+ *
2560
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
2561
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
2562
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
2563
+ *
2564
+ * @default "both"
2565
+ */
2566
+ floatingMenuTriggers?: FloatingMenuTrigger;
2419
2567
  }
2420
2568
  /**
2421
2569
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -2469,7 +2617,7 @@ interface RichTextEditorProps {
2469
2617
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
2470
2618
  */
2471
2619
  declare const RichTextEditor: {
2472
- ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
2620
+ ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
2473
2621
  displayName: string;
2474
2622
  };
2475
2623
 
@@ -3287,6 +3435,33 @@ interface SettingsIconProps extends React.SVGProps<SVGSVGElement> {
3287
3435
  */
3288
3436
  declare const SettingsIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SettingsIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3289
3437
 
3438
+ /**
3439
+ * Props for the StarIcon component
3440
+ */
3441
+ interface StarIconProps extends React.SVGProps<SVGSVGElement> {
3442
+ /** Size of the icon in pixels. Defaults to 24. */
3443
+ size?: number;
3444
+ /** Additional CSS classes to apply to the icon */
3445
+ className?: string;
3446
+ /** Fill percentage (0-1) for partial star rendering. Defaults to 1 (full star). */
3447
+ fillPercentage?: number;
3448
+ }
3449
+ /**
3450
+ * Star icon component - displays a star shape.
3451
+ *
3452
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
3453
+ * Supports partial fill for half-star ratings.
3454
+ *
3455
+ * @example
3456
+ * ```tsx
3457
+ * import { StarIcon } from '@scalably/ui';
3458
+ *
3459
+ * <StarIcon size={24} className="sui-text-yellow-500" />
3460
+ * <StarIcon size={24} fillPercentage={0.5} className="sui-text-yellow-500" />
3461
+ * ```
3462
+ */
3463
+ declare const StarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<StarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3464
+
3290
3465
  /**
3291
3466
  * Props for the SuccessIcon component
3292
3467
  */
@@ -3958,4 +4133,4 @@ interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
3958
4133
  */
3959
4134
  declare const UnderlineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<UnderlineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3960
4135
 
3961
- export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
4136
+ export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };