@kinetixui/ui 0.11.0 → 0.12.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.
- package/dist/index.d.ts +344 -1
- package/dist/index.js +1705 -2
- package/package.json +5 -2
- package/src/components/color-picker.tsx +352 -0
- package/src/components/data-grid.tsx +304 -0
- package/src/components/diff-viewer.tsx +155 -0
- package/src/components/json-viewer.tsx +168 -0
- package/src/components/kanban-board.tsx +246 -0
- package/src/components/markdown-editor.tsx +288 -0
- package/src/components/message-bubble.tsx +83 -0
- package/src/components/multi-select.tsx +134 -0
- package/src/components/notification-center.tsx +119 -0
- package/src/components/tour.tsx +156 -0
- package/src/components/tree-view.tsx +273 -0
- package/src/components/virtual-list.tsx +92 -0
- package/src/index.ts +20 -0
- package/src/stories/ColorPicker.stories.tsx +28 -0
- package/src/stories/DataGrid.stories.tsx +54 -0
- package/src/stories/DiffViewer.stories.tsx +26 -0
- package/src/stories/JsonViewer.stories.tsx +31 -0
- package/src/stories/KanbanBoard.stories.tsx +44 -0
- package/src/stories/MarkdownEditor.stories.tsx +25 -0
- package/src/stories/MessageBubble.stories.tsx +32 -0
- package/src/stories/MultiSelect.stories.tsx +35 -0
- package/src/stories/NotificationCenter.stories.tsx +41 -0
- package/src/stories/Tour.stories.tsx +70 -0
- package/src/stories/TreeView.stories.tsx +38 -0
- package/src/stories/VirtualList.stories.tsx +36 -0
- package/tailwind.config.ts +2 -0
package/dist/index.d.ts
CHANGED
|
@@ -1431,7 +1431,350 @@ interface PageHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
|
1431
1431
|
}
|
|
1432
1432
|
declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1433
1433
|
|
|
1434
|
+
/**
|
|
1435
|
+
* NotificationCenter — a bell trigger opening a popover list of
|
|
1436
|
+
* read/unread items with a "mark all read" action. Composed directly
|
|
1437
|
+
* from `Popover` (re-exported as the root — no new open-state logic)
|
|
1438
|
+
* and `Button`; `NotificationItem` follows `ListItem`'s interactive-row
|
|
1439
|
+
* convention. `unreadCount`/`unread`/`onMarkAllRead` are plain props —
|
|
1440
|
+
* the read-state itself stays the caller's, same as every other
|
|
1441
|
+
* controlled/stateless component in this library. Gap-fill addition
|
|
1442
|
+
* (not in the original Figma source).
|
|
1443
|
+
*/
|
|
1444
|
+
declare const NotificationCenter: React$1.FC<PopoverPrimitive.PopoverProps>;
|
|
1445
|
+
interface NotificationCenterTriggerProps extends React$1.ComponentPropsWithoutRef<typeof Button> {
|
|
1446
|
+
unreadCount?: number;
|
|
1447
|
+
}
|
|
1448
|
+
declare const NotificationCenterTrigger: React$1.ForwardRefExoticComponent<NotificationCenterTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1449
|
+
interface NotificationCenterContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverContent> {
|
|
1450
|
+
onMarkAllRead?: () => void;
|
|
1451
|
+
}
|
|
1452
|
+
declare const NotificationCenterContent: React$1.ForwardRefExoticComponent<NotificationCenterContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1453
|
+
interface NotificationItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
1454
|
+
title: React$1.ReactNode;
|
|
1455
|
+
description?: React$1.ReactNode;
|
|
1456
|
+
time?: React$1.ReactNode;
|
|
1457
|
+
unread?: boolean;
|
|
1458
|
+
onSelect?: () => void;
|
|
1459
|
+
}
|
|
1460
|
+
declare const NotificationItem: React$1.ForwardRefExoticComponent<NotificationItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1461
|
+
|
|
1462
|
+
interface TreeViewProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1463
|
+
/** show a checkbox on every item */
|
|
1464
|
+
checkable?: boolean;
|
|
1465
|
+
expanded?: string[];
|
|
1466
|
+
defaultExpanded?: string[];
|
|
1467
|
+
onExpandedChange?: (expanded: string[]) => void;
|
|
1468
|
+
selected?: string;
|
|
1469
|
+
onSelectedChange?: (value: string) => void;
|
|
1470
|
+
checkedValues?: string[];
|
|
1471
|
+
defaultCheckedValues?: string[];
|
|
1472
|
+
onCheckedChange?: (checkedValues: string[]) => void;
|
|
1473
|
+
}
|
|
1474
|
+
declare const TreeView: React$1.ForwardRefExoticComponent<TreeViewProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1475
|
+
interface TreeItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1476
|
+
value: string;
|
|
1477
|
+
label: React$1.ReactNode;
|
|
1478
|
+
icon?: React$1.ReactNode;
|
|
1479
|
+
disabled?: boolean;
|
|
1480
|
+
children?: React$1.ReactNode;
|
|
1481
|
+
}
|
|
1482
|
+
declare const TreeItem: React$1.ForwardRefExoticComponent<TreeItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1483
|
+
|
|
1484
|
+
/**
|
|
1485
|
+
* MultiSelect — a `Combobox` that keeps multiple chips; a free-entry
|
|
1486
|
+
* token field with `creatable`. `Combobox` (the existing Popover +
|
|
1487
|
+
* Command recipe) is single-value and `Tag` is display-only, so this
|
|
1488
|
+
* composes both into an actual shippable component rather than another
|
|
1489
|
+
* "recipe" doc page. The trigger is `role="combobox"` on a plain `div`,
|
|
1490
|
+
* not a `<button>` — `Tag`'s own remove control is a real `<button>`,
|
|
1491
|
+
* and a `<button>` can't nest inside a `<button>` (invalid HTML); using
|
|
1492
|
+
* `PopoverAnchor` + manual open-state instead of `PopoverTrigger` avoids
|
|
1493
|
+
* that while keeping the whole thing keyboard-operable. Gap-fill
|
|
1494
|
+
* addition (not in the original Figma source).
|
|
1495
|
+
*/
|
|
1496
|
+
interface MultiSelectOption {
|
|
1497
|
+
value: string;
|
|
1498
|
+
label: string;
|
|
1499
|
+
}
|
|
1500
|
+
interface MultiSelectProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
1501
|
+
options: MultiSelectOption[];
|
|
1502
|
+
value?: string[];
|
|
1503
|
+
defaultValue?: string[];
|
|
1504
|
+
onValueChange?: (value: string[]) => void;
|
|
1505
|
+
placeholder?: string;
|
|
1506
|
+
/** allow adding free-entry tags that aren't in `options` */
|
|
1507
|
+
creatable?: boolean;
|
|
1508
|
+
}
|
|
1509
|
+
declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1510
|
+
|
|
1511
|
+
/**
|
|
1512
|
+
* MessageBubble — a sent/received chat bubble with grouping, timestamp,
|
|
1513
|
+
* and a status tick. `grouped` is a lightweight consecutive-run cue
|
|
1514
|
+
* (reduces the outer top corner's radius, the side that would otherwise
|
|
1515
|
+
* repeat the previous bubble's rounding) rather than full first/middle/
|
|
1516
|
+
* last position tracking — the caller already knows which messages are
|
|
1517
|
+
* consecutive, so it stays a single boolean rather than the component
|
|
1518
|
+
* inferring group position itself. Gap-fill addition (not in the
|
|
1519
|
+
* original Figma source), the last pick from the `COMPONENT-ADDITIONS.md`
|
|
1520
|
+
* Tier 2 backlog.
|
|
1521
|
+
*/
|
|
1522
|
+
interface MessageBubbleProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1523
|
+
variant?: "sent" | "received";
|
|
1524
|
+
timestamp?: React$1.ReactNode;
|
|
1525
|
+
status?: "sent" | "delivered" | "read";
|
|
1526
|
+
/** part of a consecutive run of bubbles from the same sender */
|
|
1527
|
+
grouped?: boolean;
|
|
1528
|
+
avatar?: React$1.ReactNode;
|
|
1529
|
+
}
|
|
1530
|
+
declare const MessageBubble: React$1.ForwardRefExoticComponent<MessageBubbleProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1531
|
+
declare const TypingIndicator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1532
|
+
|
|
1533
|
+
/**
|
|
1534
|
+
* Tour — sequenced spotlight popovers over real elements (onboarding
|
|
1535
|
+
* walkthroughs), with dismiss/skip/next. `target` is a CSS selector
|
|
1536
|
+
* resolved against the live DOM on every step change (and on resize/
|
|
1537
|
+
* scroll, so the spotlight tracks a target that moves or resizes) rather
|
|
1538
|
+
* than a ref, since steps are authored as plain data ahead of the
|
|
1539
|
+
* elements existing. The spotlight itself is a single positioned `div`
|
|
1540
|
+
* with a `box-shadow: 0 0 0 9999px` — a well-known CSS-only cutout
|
|
1541
|
+
* technique, no SVG mask or second overlay layer needed. No focus trap:
|
|
1542
|
+
* a tour narrates the page rather than blocking interaction with it, so
|
|
1543
|
+
* the underlying page stays operable while a step is shown. Gap-fill
|
|
1544
|
+
* addition (not in the original Figma source).
|
|
1545
|
+
*/
|
|
1546
|
+
interface TourStep {
|
|
1547
|
+
/** CSS selector for the element this step spotlights */
|
|
1548
|
+
target: string;
|
|
1549
|
+
title: React$1.ReactNode;
|
|
1550
|
+
content: React$1.ReactNode;
|
|
1551
|
+
}
|
|
1552
|
+
interface TourProps {
|
|
1553
|
+
steps: TourStep[];
|
|
1554
|
+
open: boolean;
|
|
1555
|
+
stepIndex: number;
|
|
1556
|
+
onStepIndexChange: (index: number) => void;
|
|
1557
|
+
onOpenChange: (open: boolean) => void;
|
|
1558
|
+
nextLabel?: React$1.ReactNode;
|
|
1559
|
+
backLabel?: React$1.ReactNode;
|
|
1560
|
+
skipLabel?: React$1.ReactNode;
|
|
1561
|
+
doneLabel?: React$1.ReactNode;
|
|
1562
|
+
}
|
|
1563
|
+
declare const Tour: React$1.FC<TourProps>;
|
|
1564
|
+
|
|
1565
|
+
/**
|
|
1566
|
+
* VirtualList — a windowed-rendering primitive: only the rows visible in
|
|
1567
|
+
* the scroll viewport (plus `overscan`) actually mount, so a list of
|
|
1568
|
+
* thousands of items costs the same as rendering a couple dozen. Fixed
|
|
1569
|
+
* row height only — variable-height virtualization needs a measurement
|
|
1570
|
+
* pass per row (a real library's job, e.g. `@tanstack/react-virtual`),
|
|
1571
|
+
* which is out of scope for this primitive. A prerequisite for `DataGrid`
|
|
1572
|
+
* and any `Command`/`Combobox`/`Select` with a large option list. Gap-fill
|
|
1573
|
+
* addition (not in the original Figma source).
|
|
1574
|
+
*/
|
|
1575
|
+
interface VirtualListProps<T> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1576
|
+
items: T[];
|
|
1577
|
+
/** row height in px — every row is this tall */
|
|
1578
|
+
itemHeight: number;
|
|
1579
|
+
/** viewport height — a number (px) or any CSS height value */
|
|
1580
|
+
height: number | string;
|
|
1581
|
+
renderItem: (item: T, index: number) => React$1.ReactNode;
|
|
1582
|
+
/** extra rows rendered above/below the viewport, to reduce blank flashes on fast scroll */
|
|
1583
|
+
overscan?: number;
|
|
1584
|
+
getItemKey?: (item: T, index: number) => React$1.Key;
|
|
1585
|
+
}
|
|
1586
|
+
declare function VirtualList<T>({ items, itemHeight, height, renderItem, overscan, getItemKey, className, style, onScroll, ...props }: VirtualListProps<T>): React$1.JSX.Element;
|
|
1587
|
+
|
|
1588
|
+
interface DataGridColumn<TData> {
|
|
1589
|
+
id: string;
|
|
1590
|
+
header: React$1.ReactNode;
|
|
1591
|
+
/** rendered cell content */
|
|
1592
|
+
cell: (row: TData, rowIndex: number) => React$1.ReactNode;
|
|
1593
|
+
/** raw comparable value — required for `sortable` and used to seed inline edits */
|
|
1594
|
+
value?: (row: TData) => string | number;
|
|
1595
|
+
width?: number;
|
|
1596
|
+
minWidth?: number;
|
|
1597
|
+
/** fixed to this side, not draggable, and excluded from the reorder sequence */
|
|
1598
|
+
pinned?: "left" | "right";
|
|
1599
|
+
sortable?: boolean;
|
|
1600
|
+
/** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
|
|
1601
|
+
editable?: boolean;
|
|
1602
|
+
onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
|
|
1603
|
+
}
|
|
1604
|
+
interface DataGridProps<TData> {
|
|
1605
|
+
columns: DataGridColumn<TData>[];
|
|
1606
|
+
data: TData[];
|
|
1607
|
+
/** viewport height — a number (px) or any CSS height value; enables row virtualization */
|
|
1608
|
+
height: number | string;
|
|
1609
|
+
rowHeight?: number;
|
|
1610
|
+
overscan?: number;
|
|
1611
|
+
getRowId?: (row: TData, index: number) => React$1.Key;
|
|
1612
|
+
className?: string;
|
|
1613
|
+
}
|
|
1614
|
+
/**
|
|
1615
|
+
* DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
|
|
1616
|
+
* entry calls for: row-virtualized (same fixed-row-height windowing as
|
|
1617
|
+
* `VirtualList`), with column resize, drag-to-reorder, left/right pin, single-
|
|
1618
|
+
* column sort, and double-click-to-edit cells. `DataTable` stays the
|
|
1619
|
+
* TanStack-Table-light option for a plain sortable/paginated table; reach for
|
|
1620
|
+
* `DataGrid` once the row count or column-manipulation needs outgrow it.
|
|
1621
|
+
*
|
|
1622
|
+
* Deliberately out of scope: column *virtualization* (only rows are
|
|
1623
|
+
* windowed — a grid with enough columns to need it is rare enough that this
|
|
1624
|
+
* isn't worth the added complexity) and multi-column sort. Rendered as ARIA
|
|
1625
|
+
* `grid`/`row`/`columnheader`/`gridcell` divs rather than a real `<table>` —
|
|
1626
|
+
* sticky-positioned pinned columns and a sticky header row need that
|
|
1627
|
+
* flexibility, at the cost of the native table-navigation semantics
|
|
1628
|
+
* `DataTable` still gets for free.
|
|
1629
|
+
*/
|
|
1630
|
+
declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, }: DataGridProps<TData>): React$1.JSX.Element;
|
|
1631
|
+
|
|
1632
|
+
interface JsonViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1633
|
+
data: unknown;
|
|
1634
|
+
/** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
|
|
1635
|
+
expandDepth?: number;
|
|
1636
|
+
hideCopy?: boolean;
|
|
1637
|
+
}
|
|
1638
|
+
/**
|
|
1639
|
+
* JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
|
|
1640
|
+
* (API responses, registry payloads, token diffs — a dev-tool surface the
|
|
1641
|
+
* site itself needs for `/docs/kinetixui-json` and friends). Distinct from
|
|
1642
|
+
* `TreeView`: this renders a *data structure* (object/array/primitive),
|
|
1643
|
+
* not a caller-composed hierarchy of `TreeItem`s, so expand state is
|
|
1644
|
+
* per-node uncontrolled rather than a lifted `expanded` prop — there's no
|
|
1645
|
+
* stable "value" to key a node by beyond its position in the data, and
|
|
1646
|
+
* nothing external needs to drive which nodes are open. Value colors reuse
|
|
1647
|
+
* the existing semantic tokens (`--success`/`--info`/`--warning`) rather
|
|
1648
|
+
* than introducing a separate syntax-highlighting palette. Gap-fill
|
|
1649
|
+
* addition (not in the original Figma source).
|
|
1650
|
+
*/
|
|
1651
|
+
declare const JsonViewer: React$1.ForwardRefExoticComponent<JsonViewerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1652
|
+
|
|
1653
|
+
interface DiffViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1654
|
+
oldText: string;
|
|
1655
|
+
newText: string;
|
|
1656
|
+
/** "unified" (one interleaved column, like `git diff`) or "split" (two columns, side by side). Default "unified". */
|
|
1657
|
+
mode?: "unified" | "split";
|
|
1658
|
+
/** column headers, `mode="split"` only */
|
|
1659
|
+
oldLabel?: string;
|
|
1660
|
+
newLabel?: string;
|
|
1661
|
+
}
|
|
1662
|
+
/**
|
|
1663
|
+
* DiffViewer — a side-by-side / inline text diff with line markers and
|
|
1664
|
+
* gutter line numbers (token diffs, config changes — the site itself could
|
|
1665
|
+
* use this for a "what changed between versions" view). `split` mode
|
|
1666
|
+
* doesn't pair adjacent remove/add runs onto the same row the way GitHub's
|
|
1667
|
+
* split view does — each op renders in its own column, blank on the other
|
|
1668
|
+
* side — a deliberate simplification over that extra alignment heuristic.
|
|
1669
|
+
* Gap-fill addition (not in the original Figma source).
|
|
1670
|
+
*/
|
|
1671
|
+
declare const DiffViewer: React$1.ForwardRefExoticComponent<DiffViewerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1672
|
+
|
|
1673
|
+
declare global {
|
|
1674
|
+
interface Window {
|
|
1675
|
+
EyeDropper?: new () => {
|
|
1676
|
+
open: () => Promise<{
|
|
1677
|
+
sRGBHex: string;
|
|
1678
|
+
}>;
|
|
1679
|
+
};
|
|
1680
|
+
}
|
|
1681
|
+
}
|
|
1682
|
+
interface ColorPickerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
|
|
1683
|
+
/** hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on) */
|
|
1684
|
+
value: string;
|
|
1685
|
+
onChange: (hex: string) => void;
|
|
1686
|
+
/** show an alpha slider and read/emit 8-digit hex */
|
|
1687
|
+
alpha?: boolean;
|
|
1688
|
+
/** preset swatches row */
|
|
1689
|
+
swatches?: string[];
|
|
1690
|
+
}
|
|
1691
|
+
/**
|
|
1692
|
+
* ColorPicker — a saturation/value square, hue and (optional) alpha
|
|
1693
|
+
* sliders, a hex field, and swatches. Deliberately stateful rather than
|
|
1694
|
+
* deriving hue/saturation/value from `value` on every render: HSV is a
|
|
1695
|
+
* degenerate representation at the edges — saturation 0 (grayscale) or
|
|
1696
|
+
* value 0 (black) both erase hue information, since every hue produces
|
|
1697
|
+
* the same RGB there. Re-deriving HSV from the emitted hex on every
|
|
1698
|
+
* change would make the hue thumb jump to red the moment a drag crosses
|
|
1699
|
+
* either edge. Internal HSV state persists across those edges instead,
|
|
1700
|
+
* reconciled with the `value` prop only when it changes from something
|
|
1701
|
+
* other than this component's own last emission (tracked via a ref) — the
|
|
1702
|
+
* standard fix for this class of controlled color-picker bug.
|
|
1703
|
+
*
|
|
1704
|
+
* The 2D square is hand-rolled (no Radix primitive for a 2D slider); the
|
|
1705
|
+
* hue and alpha rails reuse `@radix-ui/react-slider` directly (not the
|
|
1706
|
+
* package's own `Slider` wrapper, whose track styling is fixed) for their
|
|
1707
|
+
* built-in keyboard and ARIA handling. The eyedropper button only renders
|
|
1708
|
+
* when `window.EyeDropper` exists (Chromium-only, behind a feature flag
|
|
1709
|
+
* on some browsers) — no polyfill, it just disappears elsewhere.
|
|
1710
|
+
*/
|
|
1711
|
+
declare const ColorPicker: React$1.ForwardRefExoticComponent<ColorPickerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1712
|
+
|
|
1713
|
+
interface KanbanCard {
|
|
1714
|
+
id: string;
|
|
1715
|
+
content: React$1.ReactNode;
|
|
1716
|
+
}
|
|
1717
|
+
interface KanbanColumn {
|
|
1718
|
+
id: string;
|
|
1719
|
+
title: string;
|
|
1720
|
+
cards: KanbanCard[];
|
|
1721
|
+
}
|
|
1722
|
+
interface KanbanBoardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1723
|
+
columns: KanbanColumn[];
|
|
1724
|
+
onColumnsChange: (columns: KanbanColumn[]) => void;
|
|
1725
|
+
}
|
|
1726
|
+
/**
|
|
1727
|
+
* KanbanBoard — draggable cards across columns, with keyboard DnD. No DnD
|
|
1728
|
+
* primitive existed in this package at all, and hand-rolling accessible
|
|
1729
|
+
* drag-and-drop (pointer + touch + keyboard, collision detection, live
|
|
1730
|
+
* screen-reader announcements) from scratch would both take far longer
|
|
1731
|
+
* than this component's own logic and likely be worse than a battle-tested
|
|
1732
|
+
* library — unlike `DiffViewer`'s hand-rolled LCS diff, there's no
|
|
1733
|
+
* cross-platform-identical-algorithm argument here, since each native
|
|
1734
|
+
* platform reaches for its own idiomatic drag primitive anyway (Compose's
|
|
1735
|
+
* drag gestures, SwiftUI's `.draggable`/`.dropDestination`, Flutter's
|
|
1736
|
+
* `Draggable`/`DragTarget`). `@dnd-kit` is the dependency: no runtime CSS,
|
|
1737
|
+
* accessible by default, and this is exactly its documented "multiple
|
|
1738
|
+
* containers" sortable pattern — `onDragOver` re-parents a card into the
|
|
1739
|
+
* hovered column live (the standard approach; a little re-render churn
|
|
1740
|
+
* mid-drag is expected/upstream-documented), `onDragEnd` commits the
|
|
1741
|
+
* final within-column reorder. Column order itself isn't draggable — the
|
|
1742
|
+
* `COMPONENT-ADDITIONS.md` entry only asked for card dragging.
|
|
1743
|
+
*
|
|
1744
|
+
* `collisionDetectionStrategy` below is dnd-kit's own documented fix for a
|
|
1745
|
+
* specific multi-container gotcha: each column is both a `useDroppable`
|
|
1746
|
+
* (so an empty column, or the space below its last card, is still a valid
|
|
1747
|
+
* drop target) and wraps a `SortableContext` of its cards. A column's rect
|
|
1748
|
+
* is a strict superset of its cards' rects, so plain `closestCorners` (or
|
|
1749
|
+
* `closestCenter`/`rectIntersection` alone) almost always reports the
|
|
1750
|
+
* column itself as the collision, never a specific card underneath — over
|
|
1751
|
+
* gets stuck on the column id and item-level reordering never fires. The
|
|
1752
|
+
* fix (lifted from dnd-kit's own multiple-containers example): try
|
|
1753
|
+
* `pointerWithin` first, fall back to `rectIntersection`, and if the
|
|
1754
|
+
* winning id is a column, re-run `closestCenter` scoped to just that
|
|
1755
|
+
* column's cards to find the specific one under the pointer.
|
|
1756
|
+
*/
|
|
1757
|
+
declare const KanbanBoard: React$1.ForwardRefExoticComponent<KanbanBoardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1758
|
+
|
|
1759
|
+
interface MarkdownEditorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
|
|
1760
|
+
value: string;
|
|
1761
|
+
onChange: (value: string) => void;
|
|
1762
|
+
placeholder?: string;
|
|
1763
|
+
rows?: number;
|
|
1764
|
+
}
|
|
1765
|
+
/**
|
|
1766
|
+
* MarkdownEditor — toolbar + a plain `Textarea` (the markdown source) with
|
|
1767
|
+
* an optional rendered preview pane. Deliberately *not* `contenteditable`
|
|
1768
|
+
* (no Tiptap/Lexical): `contenteditable` has no native-platform analogue,
|
|
1769
|
+
* so a WYSIWYG rich-text editor would be a web-only, eighth standing
|
|
1770
|
+
* non-port. A markdown textarea is just a text buffer the toolbar inserts
|
|
1771
|
+
* syntax into — SwiftUI's `TextEditor`, Compose's `BasicTextField`, and
|
|
1772
|
+
* Flutter's `TextField` all support the same selection-based insertion, so
|
|
1773
|
+
* this ports cleanly to all four platforms instead.
|
|
1774
|
+
*/
|
|
1775
|
+
declare const MarkdownEditor: React$1.ForwardRefExoticComponent<MarkdownEditorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1776
|
+
|
|
1434
1777
|
/** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
|
|
1435
1778
|
declare function cn(...inputs: ClassValue[]): string;
|
|
1436
1779
|
|
|
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 };
|
|
1780
|
+
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, 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 };
|