@kinetixui/ui 0.11.0 → 0.13.0

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.
Files changed (39) hide show
  1. package/dist/index.d.ts +364 -1
  2. package/dist/index.js +2209 -493
  3. package/package.json +6 -2
  4. package/src/components/alert.tsx +1 -1
  5. package/src/components/app-bar.tsx +2 -2
  6. package/src/components/color-picker.tsx +352 -0
  7. package/src/components/data-grid.tsx +304 -0
  8. package/src/components/dialog.tsx +3 -2
  9. package/src/components/diff-viewer.tsx +155 -0
  10. package/src/components/direction-provider.tsx +27 -0
  11. package/src/components/drawer.tsx +1 -1
  12. package/src/components/dropdown-menu.tsx +9 -9
  13. package/src/components/input-group.tsx +2 -2
  14. package/src/components/json-viewer.tsx +168 -0
  15. package/src/components/kanban-board.tsx +247 -0
  16. package/src/components/markdown-editor.tsx +288 -0
  17. package/src/components/message-bubble.tsx +83 -0
  18. package/src/components/multi-select.tsx +134 -0
  19. package/src/components/native-select.tsx +2 -2
  20. package/src/components/notification-center.tsx +119 -0
  21. package/src/components/select.tsx +2 -2
  22. package/src/components/sheet.tsx +5 -2
  23. package/src/components/tour.tsx +156 -0
  24. package/src/components/tree-view.tsx +273 -0
  25. package/src/components/virtual-list.tsx +92 -0
  26. package/src/index.ts +24 -0
  27. package/src/stories/ColorPicker.stories.tsx +28 -0
  28. package/src/stories/DataGrid.stories.tsx +54 -0
  29. package/src/stories/DiffViewer.stories.tsx +26 -0
  30. package/src/stories/JsonViewer.stories.tsx +31 -0
  31. package/src/stories/KanbanBoard.stories.tsx +44 -0
  32. package/src/stories/MarkdownEditor.stories.tsx +25 -0
  33. package/src/stories/MessageBubble.stories.tsx +32 -0
  34. package/src/stories/MultiSelect.stories.tsx +35 -0
  35. package/src/stories/NotificationCenter.stories.tsx +41 -0
  36. package/src/stories/Tour.stories.tsx +70 -0
  37. package/src/stories/TreeView.stories.tsx +38 -0
  38. package/src/stories/VirtualList.stories.tsx +36 -0
  39. package/tailwind.config.ts +2 -0
package/dist/index.d.ts CHANGED
@@ -137,6 +137,26 @@ declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDia
137
137
 
138
138
  declare const AspectRatio: React$1.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React$1.RefAttributes<HTMLDivElement>>;
139
139
 
140
+ interface KinetixDirectionProviderProps {
141
+ children?: React$1.ReactNode;
142
+ dir: "ltr" | "rtl";
143
+ }
144
+ /**
145
+ * Every Radix primitive this library builds on (Select, DropdownMenu, Popover,
146
+ * Tooltip, ContextMenu, Menubar, NavigationMenu, HoverCard, …) reads direction
147
+ * from a `DirectionContext`, not from the ambient `dir` attribute — with no
148
+ * provider in the tree it defaults hard to `"ltr"` and stamps that onto its own
149
+ * portaled content, regardless of what `<html dir="rtl">` says. Logical-property
150
+ * CSS (see RTL.md) mirrors layout; this is what makes Radix's own positioning
151
+ * and portaled content agree with it. Wrap your app root in this alongside
152
+ * setting `dir` on `<html>`:
153
+ *
154
+ * <html dir={dir}>
155
+ * <KinetixDirectionProvider dir={dir}>{children}</KinetixDirectionProvider>
156
+ * </html>
157
+ */
158
+ declare function KinetixDirectionProvider({ dir, children }: KinetixDirectionProviderProps): React$1.JSX.Element;
159
+
140
160
  declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
141
161
  declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
142
162
  declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
@@ -1431,7 +1451,350 @@ interface PageHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
1431
1451
  }
1432
1452
  declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
1433
1453
 
1454
+ /**
1455
+ * NotificationCenter — a bell trigger opening a popover list of
1456
+ * read/unread items with a "mark all read" action. Composed directly
1457
+ * from `Popover` (re-exported as the root — no new open-state logic)
1458
+ * and `Button`; `NotificationItem` follows `ListItem`'s interactive-row
1459
+ * convention. `unreadCount`/`unread`/`onMarkAllRead` are plain props —
1460
+ * the read-state itself stays the caller's, same as every other
1461
+ * controlled/stateless component in this library. Gap-fill addition
1462
+ * (not in the original Figma source).
1463
+ */
1464
+ declare const NotificationCenter: React$1.FC<PopoverPrimitive.PopoverProps>;
1465
+ interface NotificationCenterTriggerProps extends React$1.ComponentPropsWithoutRef<typeof Button> {
1466
+ unreadCount?: number;
1467
+ }
1468
+ declare const NotificationCenterTrigger: React$1.ForwardRefExoticComponent<NotificationCenterTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
1469
+ interface NotificationCenterContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverContent> {
1470
+ onMarkAllRead?: () => void;
1471
+ }
1472
+ declare const NotificationCenterContent: React$1.ForwardRefExoticComponent<NotificationCenterContentProps & React$1.RefAttributes<HTMLDivElement>>;
1473
+ interface NotificationItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
1474
+ title: React$1.ReactNode;
1475
+ description?: React$1.ReactNode;
1476
+ time?: React$1.ReactNode;
1477
+ unread?: boolean;
1478
+ onSelect?: () => void;
1479
+ }
1480
+ declare const NotificationItem: React$1.ForwardRefExoticComponent<NotificationItemProps & React$1.RefAttributes<HTMLDivElement>>;
1481
+
1482
+ interface TreeViewProps extends React$1.HTMLAttributes<HTMLDivElement> {
1483
+ /** show a checkbox on every item */
1484
+ checkable?: boolean;
1485
+ expanded?: string[];
1486
+ defaultExpanded?: string[];
1487
+ onExpandedChange?: (expanded: string[]) => void;
1488
+ selected?: string;
1489
+ onSelectedChange?: (value: string) => void;
1490
+ checkedValues?: string[];
1491
+ defaultCheckedValues?: string[];
1492
+ onCheckedChange?: (checkedValues: string[]) => void;
1493
+ }
1494
+ declare const TreeView: React$1.ForwardRefExoticComponent<TreeViewProps & React$1.RefAttributes<HTMLDivElement>>;
1495
+ interface TreeItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
1496
+ value: string;
1497
+ label: React$1.ReactNode;
1498
+ icon?: React$1.ReactNode;
1499
+ disabled?: boolean;
1500
+ children?: React$1.ReactNode;
1501
+ }
1502
+ declare const TreeItem: React$1.ForwardRefExoticComponent<TreeItemProps & React$1.RefAttributes<HTMLDivElement>>;
1503
+
1504
+ /**
1505
+ * MultiSelect — a `Combobox` that keeps multiple chips; a free-entry
1506
+ * token field with `creatable`. `Combobox` (the existing Popover +
1507
+ * Command recipe) is single-value and `Tag` is display-only, so this
1508
+ * composes both into an actual shippable component rather than another
1509
+ * "recipe" doc page. The trigger is `role="combobox"` on a plain `div`,
1510
+ * not a `<button>` — `Tag`'s own remove control is a real `<button>`,
1511
+ * and a `<button>` can't nest inside a `<button>` (invalid HTML); using
1512
+ * `PopoverAnchor` + manual open-state instead of `PopoverTrigger` avoids
1513
+ * that while keeping the whole thing keyboard-operable. Gap-fill
1514
+ * addition (not in the original Figma source).
1515
+ */
1516
+ interface MultiSelectOption {
1517
+ value: string;
1518
+ label: string;
1519
+ }
1520
+ interface MultiSelectProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
1521
+ options: MultiSelectOption[];
1522
+ value?: string[];
1523
+ defaultValue?: string[];
1524
+ onValueChange?: (value: string[]) => void;
1525
+ placeholder?: string;
1526
+ /** allow adding free-entry tags that aren't in `options` */
1527
+ creatable?: boolean;
1528
+ }
1529
+ declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLDivElement>>;
1530
+
1531
+ /**
1532
+ * MessageBubble — a sent/received chat bubble with grouping, timestamp,
1533
+ * and a status tick. `grouped` is a lightweight consecutive-run cue
1534
+ * (reduces the outer top corner's radius, the side that would otherwise
1535
+ * repeat the previous bubble's rounding) rather than full first/middle/
1536
+ * last position tracking — the caller already knows which messages are
1537
+ * consecutive, so it stays a single boolean rather than the component
1538
+ * inferring group position itself. Gap-fill addition (not in the
1539
+ * original Figma source), the last pick from the `COMPONENT-ADDITIONS.md`
1540
+ * Tier 2 backlog.
1541
+ */
1542
+ interface MessageBubbleProps extends React$1.HTMLAttributes<HTMLDivElement> {
1543
+ variant?: "sent" | "received";
1544
+ timestamp?: React$1.ReactNode;
1545
+ status?: "sent" | "delivered" | "read";
1546
+ /** part of a consecutive run of bubbles from the same sender */
1547
+ grouped?: boolean;
1548
+ avatar?: React$1.ReactNode;
1549
+ }
1550
+ declare const MessageBubble: React$1.ForwardRefExoticComponent<MessageBubbleProps & React$1.RefAttributes<HTMLDivElement>>;
1551
+ declare const TypingIndicator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
1552
+
1553
+ /**
1554
+ * Tour — sequenced spotlight popovers over real elements (onboarding
1555
+ * walkthroughs), with dismiss/skip/next. `target` is a CSS selector
1556
+ * resolved against the live DOM on every step change (and on resize/
1557
+ * scroll, so the spotlight tracks a target that moves or resizes) rather
1558
+ * than a ref, since steps are authored as plain data ahead of the
1559
+ * elements existing. The spotlight itself is a single positioned `div`
1560
+ * with a `box-shadow: 0 0 0 9999px` — a well-known CSS-only cutout
1561
+ * technique, no SVG mask or second overlay layer needed. No focus trap:
1562
+ * a tour narrates the page rather than blocking interaction with it, so
1563
+ * the underlying page stays operable while a step is shown. Gap-fill
1564
+ * addition (not in the original Figma source).
1565
+ */
1566
+ interface TourStep {
1567
+ /** CSS selector for the element this step spotlights */
1568
+ target: string;
1569
+ title: React$1.ReactNode;
1570
+ content: React$1.ReactNode;
1571
+ }
1572
+ interface TourProps {
1573
+ steps: TourStep[];
1574
+ open: boolean;
1575
+ stepIndex: number;
1576
+ onStepIndexChange: (index: number) => void;
1577
+ onOpenChange: (open: boolean) => void;
1578
+ nextLabel?: React$1.ReactNode;
1579
+ backLabel?: React$1.ReactNode;
1580
+ skipLabel?: React$1.ReactNode;
1581
+ doneLabel?: React$1.ReactNode;
1582
+ }
1583
+ declare const Tour: React$1.FC<TourProps>;
1584
+
1585
+ /**
1586
+ * VirtualList — a windowed-rendering primitive: only the rows visible in
1587
+ * the scroll viewport (plus `overscan`) actually mount, so a list of
1588
+ * thousands of items costs the same as rendering a couple dozen. Fixed
1589
+ * row height only — variable-height virtualization needs a measurement
1590
+ * pass per row (a real library's job, e.g. `@tanstack/react-virtual`),
1591
+ * which is out of scope for this primitive. A prerequisite for `DataGrid`
1592
+ * and any `Command`/`Combobox`/`Select` with a large option list. Gap-fill
1593
+ * addition (not in the original Figma source).
1594
+ */
1595
+ interface VirtualListProps<T> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
1596
+ items: T[];
1597
+ /** row height in px — every row is this tall */
1598
+ itemHeight: number;
1599
+ /** viewport height — a number (px) or any CSS height value */
1600
+ height: number | string;
1601
+ renderItem: (item: T, index: number) => React$1.ReactNode;
1602
+ /** extra rows rendered above/below the viewport, to reduce blank flashes on fast scroll */
1603
+ overscan?: number;
1604
+ getItemKey?: (item: T, index: number) => React$1.Key;
1605
+ }
1606
+ declare function VirtualList<T>({ items, itemHeight, height, renderItem, overscan, getItemKey, className, style, onScroll, ...props }: VirtualListProps<T>): React$1.JSX.Element;
1607
+
1608
+ interface DataGridColumn<TData> {
1609
+ id: string;
1610
+ header: React$1.ReactNode;
1611
+ /** rendered cell content */
1612
+ cell: (row: TData, rowIndex: number) => React$1.ReactNode;
1613
+ /** raw comparable value — required for `sortable` and used to seed inline edits */
1614
+ value?: (row: TData) => string | number;
1615
+ width?: number;
1616
+ minWidth?: number;
1617
+ /** fixed to this side, not draggable, and excluded from the reorder sequence */
1618
+ pinned?: "left" | "right";
1619
+ sortable?: boolean;
1620
+ /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
1621
+ editable?: boolean;
1622
+ onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
1623
+ }
1624
+ interface DataGridProps<TData> {
1625
+ columns: DataGridColumn<TData>[];
1626
+ data: TData[];
1627
+ /** viewport height — a number (px) or any CSS height value; enables row virtualization */
1628
+ height: number | string;
1629
+ rowHeight?: number;
1630
+ overscan?: number;
1631
+ getRowId?: (row: TData, index: number) => React$1.Key;
1632
+ className?: string;
1633
+ }
1634
+ /**
1635
+ * DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
1636
+ * entry calls for: row-virtualized (same fixed-row-height windowing as
1637
+ * `VirtualList`), with column resize, drag-to-reorder, left/right pin, single-
1638
+ * column sort, and double-click-to-edit cells. `DataTable` stays the
1639
+ * TanStack-Table-light option for a plain sortable/paginated table; reach for
1640
+ * `DataGrid` once the row count or column-manipulation needs outgrow it.
1641
+ *
1642
+ * Deliberately out of scope: column *virtualization* (only rows are
1643
+ * windowed — a grid with enough columns to need it is rare enough that this
1644
+ * isn't worth the added complexity) and multi-column sort. Rendered as ARIA
1645
+ * `grid`/`row`/`columnheader`/`gridcell` divs rather than a real `<table>` —
1646
+ * sticky-positioned pinned columns and a sticky header row need that
1647
+ * flexibility, at the cost of the native table-navigation semantics
1648
+ * `DataTable` still gets for free.
1649
+ */
1650
+ declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, }: DataGridProps<TData>): React$1.JSX.Element;
1651
+
1652
+ interface JsonViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
1653
+ data: unknown;
1654
+ /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
1655
+ expandDepth?: number;
1656
+ hideCopy?: boolean;
1657
+ }
1658
+ /**
1659
+ * JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
1660
+ * (API responses, registry payloads, token diffs — a dev-tool surface the
1661
+ * site itself needs for `/docs/kinetixui-json` and friends). Distinct from
1662
+ * `TreeView`: this renders a *data structure* (object/array/primitive),
1663
+ * not a caller-composed hierarchy of `TreeItem`s, so expand state is
1664
+ * per-node uncontrolled rather than a lifted `expanded` prop — there's no
1665
+ * stable "value" to key a node by beyond its position in the data, and
1666
+ * nothing external needs to drive which nodes are open. Value colors reuse
1667
+ * the existing semantic tokens (`--success`/`--info`/`--warning`) rather
1668
+ * than introducing a separate syntax-highlighting palette. Gap-fill
1669
+ * addition (not in the original Figma source).
1670
+ */
1671
+ declare const JsonViewer: React$1.ForwardRefExoticComponent<JsonViewerProps & React$1.RefAttributes<HTMLDivElement>>;
1672
+
1673
+ interface DiffViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
1674
+ oldText: string;
1675
+ newText: string;
1676
+ /** "unified" (one interleaved column, like `git diff`) or "split" (two columns, side by side). Default "unified". */
1677
+ mode?: "unified" | "split";
1678
+ /** column headers, `mode="split"` only */
1679
+ oldLabel?: string;
1680
+ newLabel?: string;
1681
+ }
1682
+ /**
1683
+ * DiffViewer — a side-by-side / inline text diff with line markers and
1684
+ * gutter line numbers (token diffs, config changes — the site itself could
1685
+ * use this for a "what changed between versions" view). `split` mode
1686
+ * doesn't pair adjacent remove/add runs onto the same row the way GitHub's
1687
+ * split view does — each op renders in its own column, blank on the other
1688
+ * side — a deliberate simplification over that extra alignment heuristic.
1689
+ * Gap-fill addition (not in the original Figma source).
1690
+ */
1691
+ declare const DiffViewer: React$1.ForwardRefExoticComponent<DiffViewerProps & React$1.RefAttributes<HTMLDivElement>>;
1692
+
1693
+ declare global {
1694
+ interface Window {
1695
+ EyeDropper?: new () => {
1696
+ open: () => Promise<{
1697
+ sRGBHex: string;
1698
+ }>;
1699
+ };
1700
+ }
1701
+ }
1702
+ interface ColorPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
1703
+ /** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on) */
1704
+ value: string;
1705
+ onChange: (hex: string) => void;
1706
+ /** show an alpha slider and read/emit 8-digit hex */
1707
+ alpha?: boolean;
1708
+ /** preset swatches row */
1709
+ swatches?: string[];
1710
+ }
1711
+ /**
1712
+ * ColorPicker — a saturation/value square, hue and (optional) alpha
1713
+ * sliders, a hex field, and swatches. Deliberately stateful rather than
1714
+ * deriving hue/saturation/value from `value` on every render: HSV is a
1715
+ * degenerate representation at the edges — saturation 0 (grayscale) or
1716
+ * value 0 (black) both erase hue information, since every hue produces
1717
+ * the same RGB there. Re-deriving HSV from the emitted hex on every
1718
+ * change would make the hue thumb jump to red the moment a drag crosses
1719
+ * either edge. Internal HSV state persists across those edges instead,
1720
+ * reconciled with the `value` prop only when it changes from something
1721
+ * other than this component's own last emission (tracked via a ref) — the
1722
+ * standard fix for this class of controlled color-picker bug.
1723
+ *
1724
+ * The 2D square is hand-rolled (no Radix primitive for a 2D slider); the
1725
+ * hue and alpha rails reuse `@radix-ui/react-slider` directly (not the
1726
+ * package's own `Slider` wrapper, whose track styling is fixed) for their
1727
+ * built-in keyboard and ARIA handling. The eyedropper button only renders
1728
+ * when `window.EyeDropper` exists (Chromium-only, behind a feature flag
1729
+ * on some browsers) — no polyfill, it just disappears elsewhere.
1730
+ */
1731
+ declare const ColorPicker: React$1.ForwardRefExoticComponent<ColorPickerProps & React$1.RefAttributes<HTMLDivElement>>;
1732
+
1733
+ interface KanbanCard {
1734
+ id: string;
1735
+ content: React$1.ReactNode;
1736
+ }
1737
+ interface KanbanColumn {
1738
+ id: string;
1739
+ title: string;
1740
+ cards: KanbanCard[];
1741
+ }
1742
+ interface KanbanBoardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
1743
+ columns: KanbanColumn[];
1744
+ onColumnsChange: (columns: KanbanColumn[]) => void;
1745
+ }
1746
+ /**
1747
+ * KanbanBoard — draggable cards across columns, with keyboard DnD. No DnD
1748
+ * primitive existed in this package at all, and hand-rolling accessible
1749
+ * drag-and-drop (pointer + touch + keyboard, collision detection, live
1750
+ * screen-reader announcements) from scratch would both take far longer
1751
+ * than this component's own logic and likely be worse than a battle-tested
1752
+ * library — unlike `DiffViewer`'s hand-rolled LCS diff, there's no
1753
+ * cross-platform-identical-algorithm argument here, since each native
1754
+ * platform reaches for its own idiomatic drag primitive anyway (Compose's
1755
+ * drag gestures, SwiftUI's `.draggable`/`.dropDestination`, Flutter's
1756
+ * `Draggable`/`DragTarget`). `@dnd-kit` is the dependency: no runtime CSS,
1757
+ * accessible by default, and this is exactly its documented "multiple
1758
+ * containers" sortable pattern — `onDragOver` re-parents a card into the
1759
+ * hovered column live (the standard approach; a little re-render churn
1760
+ * mid-drag is expected/upstream-documented), `onDragEnd` commits the
1761
+ * final within-column reorder. Column order itself isn't draggable — the
1762
+ * `COMPONENT-ADDITIONS.md` entry only asked for card dragging.
1763
+ *
1764
+ * `collisionDetectionStrategy` below is dnd-kit's own documented fix for a
1765
+ * specific multi-container gotcha: each column is both a `useDroppable`
1766
+ * (so an empty column, or the space below its last card, is still a valid
1767
+ * drop target) and wraps a `SortableContext` of its cards. A column's rect
1768
+ * is a strict superset of its cards' rects, so plain `closestCorners` (or
1769
+ * `closestCenter`/`rectIntersection` alone) almost always reports the
1770
+ * column itself as the collision, never a specific card underneath — over
1771
+ * gets stuck on the column id and item-level reordering never fires. The
1772
+ * fix (lifted from dnd-kit's own multiple-containers example): try
1773
+ * `pointerWithin` first, fall back to `rectIntersection`, and if the
1774
+ * winning id is a column, re-run `closestCenter` scoped to just that
1775
+ * column's cards to find the specific one under the pointer.
1776
+ */
1777
+ declare const KanbanBoard: React$1.ForwardRefExoticComponent<KanbanBoardProps & React$1.RefAttributes<HTMLDivElement>>;
1778
+
1779
+ interface MarkdownEditorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
1780
+ value: string;
1781
+ onChange: (value: string) => void;
1782
+ placeholder?: string;
1783
+ rows?: number;
1784
+ }
1785
+ /**
1786
+ * MarkdownEditor — toolbar + a plain `Textarea` (the markdown source) with
1787
+ * an optional rendered preview pane. Deliberately *not* `contenteditable`
1788
+ * (no Tiptap/Lexical): `contenteditable` has no native-platform analogue,
1789
+ * so a WYSIWYG rich-text editor would be a web-only, eighth standing
1790
+ * non-port. A markdown textarea is just a text buffer the toolbar inserts
1791
+ * syntax into — SwiftUI's `TextEditor`, Compose's `BasicTextField`, and
1792
+ * Flutter's `TextField` all support the same selection-based insertion, so
1793
+ * this ports cleanly to all four platforms instead.
1794
+ */
1795
+ declare const MarkdownEditor: React$1.ForwardRefExoticComponent<MarkdownEditorProps & React$1.RefAttributes<HTMLDivElement>>;
1796
+
1434
1797
  /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
1435
1798
  declare function cn(...inputs: ClassValue[]): string;
1436
1799
 
1437
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, List, ListItem, type ListItemProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Metric, type MetricProps, Modal, type ModalProps, type ModalType, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };
1800
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };