@vesture/react 0.2.9 → 0.3.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.css +226 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +232 -1
- package/dist/index.js +1670 -10
- package/dist/index.js.map +1 -1
- package/package.json +8 -1
package/dist/index.d.ts
CHANGED
|
@@ -539,4 +539,235 @@ interface TreeViewProps<T = unknown> {
|
|
|
539
539
|
|
|
540
540
|
declare function TreeView<T = unknown>({ nodes, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, defaultSelected, onSelectedChange, selectable, onLoadChildren, height, rowHeight, }: TreeViewProps<T>): ReactElement;
|
|
541
541
|
|
|
542
|
-
|
|
542
|
+
interface CommandItem {
|
|
543
|
+
id: string;
|
|
544
|
+
label: string;
|
|
545
|
+
description?: string;
|
|
546
|
+
icon?: ReactNode;
|
|
547
|
+
/** Extra searchable terms not shown in the label. */
|
|
548
|
+
keywords?: string[];
|
|
549
|
+
/** Display-only, e.g. "⌘K". */
|
|
550
|
+
shortcut?: string;
|
|
551
|
+
/** Groups render under a section header, in the order groups first appear in `commands`. */
|
|
552
|
+
group?: string;
|
|
553
|
+
onSelect: () => void;
|
|
554
|
+
disabled?: boolean;
|
|
555
|
+
}
|
|
556
|
+
interface CommandPaletteProps {
|
|
557
|
+
open: boolean;
|
|
558
|
+
onOpenChange: (open: boolean) => void;
|
|
559
|
+
commands: CommandItem[];
|
|
560
|
+
placeholder?: string;
|
|
561
|
+
emptyMessage?: string;
|
|
562
|
+
/** Overrides the default case-insensitive substring match against label + keywords + group. */
|
|
563
|
+
filterCommands?: (commands: CommandItem[], query: string) => CommandItem[];
|
|
564
|
+
/** Number of rows (commands + group headers) at/above which the list switches to virtualized rendering. */
|
|
565
|
+
virtualizationThreshold?: number;
|
|
566
|
+
/** Row height (px) used for virtualized rows; defaults to the `.option` class's rendered height. */
|
|
567
|
+
rowHeight?: number;
|
|
568
|
+
"aria-label"?: string;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
declare function CommandPalette({ open, onOpenChange, commands, placeholder, emptyMessage, filterCommands, virtualizationThreshold, rowHeight, "aria-label": ariaLabel }: CommandPaletteProps): ReactElement | null;
|
|
572
|
+
|
|
573
|
+
interface UseCommandPaletteShortcutOptions {
|
|
574
|
+
key?: string;
|
|
575
|
+
metaKey?: boolean;
|
|
576
|
+
ctrlKey?: boolean;
|
|
577
|
+
}
|
|
578
|
+
/**
|
|
579
|
+
* Attaches a document-level Cmd+K (Mac) / Ctrl+K (elsewhere) listener that
|
|
580
|
+
* calls onOpenChange(true). Separate from CommandPalette so consumers can
|
|
581
|
+
* wire their own trigger instead.
|
|
582
|
+
*/
|
|
583
|
+
declare function useCommandPaletteShortcut(onOpenChange: (open: boolean) => void, options?: UseCommandPaletteShortcutOptions): void;
|
|
584
|
+
|
|
585
|
+
/** A single row of chart data. `x` is the shared category/position for every series; each series' value is looked up by its `key` on this object. */
|
|
586
|
+
interface LineChartDataPoint {
|
|
587
|
+
x: string | number | Date;
|
|
588
|
+
[seriesKey: string]: string | number | Date;
|
|
589
|
+
}
|
|
590
|
+
interface LineChartSeries {
|
|
591
|
+
key: string;
|
|
592
|
+
label: string;
|
|
593
|
+
/** Overrides the auto-assigned series1-8 token color for this series. */
|
|
594
|
+
color?: string;
|
|
595
|
+
}
|
|
596
|
+
type LineChartXScaleType = "linear" | "time" | "band";
|
|
597
|
+
interface LineChartMargin {
|
|
598
|
+
top: number;
|
|
599
|
+
right: number;
|
|
600
|
+
bottom: number;
|
|
601
|
+
left: number;
|
|
602
|
+
}
|
|
603
|
+
/** Props shared by the static `LineChart` and the client-only `InteractiveLineChart`. */
|
|
604
|
+
interface LineChartBaseProps {
|
|
605
|
+
data: LineChartDataPoint[];
|
|
606
|
+
series: LineChartSeries[];
|
|
607
|
+
/** Defaults to inferring from the first data point's `x` type (Date -> time, number -> linear, string -> band). */
|
|
608
|
+
xScale?: LineChartXScaleType;
|
|
609
|
+
margin?: Partial<LineChartMargin>;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
interface LineChartProps extends LineChartBaseProps {
|
|
613
|
+
width: number;
|
|
614
|
+
height: number;
|
|
615
|
+
}
|
|
616
|
+
/**
|
|
617
|
+
* Server-safe, zero-JS line chart. Renders a static SVG with no event handlers — use it in
|
|
618
|
+
* server components, static reports, or anywhere a hover tooltip/legend isn't needed. For a
|
|
619
|
+
* dashboard-style chart with hover tooltips and a toggleable legend, use `InteractiveLineChart`
|
|
620
|
+
* instead (it wraps this component and requires client-side JS).
|
|
621
|
+
*/
|
|
622
|
+
declare function LineChart({ data, series, width, height, margin, xScale }: LineChartProps): ReactElement;
|
|
623
|
+
|
|
624
|
+
interface InteractiveLineChartProps extends LineChartBaseProps {
|
|
625
|
+
/** Fixed chart height; width auto-tracks the parent container's size via ResizeObserver. */
|
|
626
|
+
height?: number;
|
|
627
|
+
}
|
|
628
|
+
/**
|
|
629
|
+
* Client-rendered line chart for dashboards: auto-sizes to its parent (via `@visx/responsive`'s
|
|
630
|
+
* `ParentSize`), and adds a hover tooltip plus a click-to-toggle legend. Requires client-side JS
|
|
631
|
+
* ("use client") — for server components or static output where no interaction is needed, use
|
|
632
|
+
* the static `LineChart` instead.
|
|
633
|
+
*/
|
|
634
|
+
declare function InteractiveLineChart({ data, series, margin, xScale, height }: InteractiveLineChartProps): ReactElement;
|
|
635
|
+
|
|
636
|
+
/** A single category's row of chart data. Each series' value is looked up by its `key` on this object. */
|
|
637
|
+
interface BarChartDataPoint {
|
|
638
|
+
category: string;
|
|
639
|
+
[seriesKey: string]: string | number;
|
|
640
|
+
}
|
|
641
|
+
interface BarChartSeries {
|
|
642
|
+
key: string;
|
|
643
|
+
label: string;
|
|
644
|
+
/** Overrides the auto-assigned series1-8 token color for this series. */
|
|
645
|
+
color?: string;
|
|
646
|
+
}
|
|
647
|
+
/** 'grouped': series render as side-by-side bars per category. 'stacked': series stack into one bar per category. */
|
|
648
|
+
type BarChartLayout = "grouped" | "stacked";
|
|
649
|
+
interface BarChartMargin {
|
|
650
|
+
top: number;
|
|
651
|
+
right: number;
|
|
652
|
+
bottom: number;
|
|
653
|
+
left: number;
|
|
654
|
+
}
|
|
655
|
+
/** Props shared by the static `BarChart` and the client-only `InteractiveBarChart`. */
|
|
656
|
+
interface BarChartBaseProps {
|
|
657
|
+
data: BarChartDataPoint[];
|
|
658
|
+
series: BarChartSeries[];
|
|
659
|
+
/** Defaults to 'grouped'. */
|
|
660
|
+
layout?: BarChartLayout;
|
|
661
|
+
margin?: Partial<BarChartMargin>;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
interface BarChartProps extends BarChartBaseProps {
|
|
665
|
+
width: number;
|
|
666
|
+
height: number;
|
|
667
|
+
}
|
|
668
|
+
/**
|
|
669
|
+
* Server-safe, zero-JS bar chart. Renders a static SVG with no event handlers — use it in
|
|
670
|
+
* server components, static reports, or anywhere a hover tooltip/legend isn't needed. For a
|
|
671
|
+
* dashboard-style chart with hover tooltips and a toggleable legend, use `InteractiveBarChart`
|
|
672
|
+
* instead (it wraps this component and requires client-side JS).
|
|
673
|
+
*/
|
|
674
|
+
declare function BarChart({ data, series, width, height, margin, layout }: BarChartProps): ReactElement;
|
|
675
|
+
|
|
676
|
+
interface InteractiveBarChartProps extends BarChartBaseProps {
|
|
677
|
+
/** Fixed chart height; width auto-tracks the parent container's size via ResizeObserver. */
|
|
678
|
+
height?: number;
|
|
679
|
+
}
|
|
680
|
+
/**
|
|
681
|
+
* Client-rendered bar chart for dashboards: auto-sizes to its parent (via `@visx/responsive`'s
|
|
682
|
+
* `ParentSize`), and adds a per-bar hover tooltip plus a click-to-toggle legend. Requires
|
|
683
|
+
* client-side JS ("use client") — for server components or static output where no interaction
|
|
684
|
+
* is needed, use the static `BarChart` instead.
|
|
685
|
+
*/
|
|
686
|
+
declare function InteractiveBarChart({ data, series, margin, layout, height }: InteractiveBarChartProps): ReactElement;
|
|
687
|
+
|
|
688
|
+
type AreaChartDataPoint = LineChartDataPoint;
|
|
689
|
+
type AreaChartSeries = LineChartSeries;
|
|
690
|
+
type AreaChartMargin = LineChartMargin;
|
|
691
|
+
type AreaChartXScaleType = LineChartXScaleType;
|
|
692
|
+
/** Props shared by the static `AreaChart` and the client-only `InteractiveAreaChart`. */
|
|
693
|
+
interface AreaChartBaseProps {
|
|
694
|
+
data: AreaChartDataPoint[];
|
|
695
|
+
series: AreaChartSeries[];
|
|
696
|
+
/** Defaults to inferring from the first data point's `x` type (Date -> time, number -> linear, string -> band). */
|
|
697
|
+
xScale?: AreaChartXScaleType;
|
|
698
|
+
margin?: Partial<AreaChartMargin>;
|
|
699
|
+
/** When true, series stack cumulatively into one filled region per x. When false (default), series overlap with partial opacity so all remain visible. */
|
|
700
|
+
stacked?: boolean;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
interface AreaChartProps extends AreaChartBaseProps {
|
|
704
|
+
width: number;
|
|
705
|
+
height: number;
|
|
706
|
+
}
|
|
707
|
+
/**
|
|
708
|
+
* Server-safe, zero-JS area chart. Renders a static SVG with no event handlers — use it in
|
|
709
|
+
* server components, static reports, or anywhere a hover tooltip/legend isn't needed. For a
|
|
710
|
+
* dashboard-style chart with hover tooltips and a toggleable legend, use `InteractiveAreaChart`
|
|
711
|
+
* instead (it wraps this component and requires client-side JS).
|
|
712
|
+
*/
|
|
713
|
+
declare function AreaChart({ data, series, width, height, margin, xScale, stacked }: AreaChartProps): ReactElement;
|
|
714
|
+
|
|
715
|
+
interface InteractiveAreaChartProps extends AreaChartBaseProps {
|
|
716
|
+
/** Fixed chart height; width auto-tracks the parent container's size via ResizeObserver. */
|
|
717
|
+
height?: number;
|
|
718
|
+
}
|
|
719
|
+
/**
|
|
720
|
+
* Client-rendered area chart for dashboards: auto-sizes to its parent (via `@visx/responsive`'s
|
|
721
|
+
* `ParentSize`), and adds a nearest-point hover tooltip plus a click-to-toggle legend — the same
|
|
722
|
+
* continuous-x-axis hover technique `InteractiveLineChart` uses (an area chart behaves like a
|
|
723
|
+
* line chart for hover purposes, not like BarChart's discrete per-element hover). Requires
|
|
724
|
+
* client-side JS ("use client") — for server components or static output where no interaction
|
|
725
|
+
* is needed, use the static `AreaChart` instead.
|
|
726
|
+
*/
|
|
727
|
+
declare function InteractiveAreaChart({ data, series, margin, xScale, stacked, height }: InteractiveAreaChartProps): ReactElement;
|
|
728
|
+
|
|
729
|
+
interface PieChartDataPoint {
|
|
730
|
+
key: string;
|
|
731
|
+
label: string;
|
|
732
|
+
value: number;
|
|
733
|
+
/** Overrides the auto-assigned series1-8 token color for this slice. */
|
|
734
|
+
color?: string;
|
|
735
|
+
}
|
|
736
|
+
/** Props shared by the static `PieChart` and the client-only `InteractivePieChart`. */
|
|
737
|
+
interface PieChartBaseProps {
|
|
738
|
+
data: PieChartDataPoint[];
|
|
739
|
+
/** Fraction of outerRadius carved out as a center hole: 0 (default) = full pie, e.g. 0.6 = donut. */
|
|
740
|
+
innerRadius?: number;
|
|
741
|
+
/** Whether to render in-slice percentage labels on slices wide enough to fit one. Defaults to true. */
|
|
742
|
+
showLabels?: boolean;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
interface PieChartProps extends PieChartBaseProps {
|
|
746
|
+
width: number;
|
|
747
|
+
height: number;
|
|
748
|
+
}
|
|
749
|
+
/**
|
|
750
|
+
* Server-safe, zero-JS pie/donut chart. Renders a static SVG with no event handlers — use it
|
|
751
|
+
* in server components, static reports, or anywhere a hover tooltip/legend isn't needed. For a
|
|
752
|
+
* dashboard-style chart with per-slice hover emphasis, a tooltip, and a toggleable legend, use
|
|
753
|
+
* `InteractivePieChart` instead (it wraps this component and requires client-side JS).
|
|
754
|
+
*/
|
|
755
|
+
declare function PieChart({ data, width, height, innerRadius, showLabels }: PieChartProps): ReactElement;
|
|
756
|
+
|
|
757
|
+
interface InteractivePieChartProps extends PieChartBaseProps {
|
|
758
|
+
/** Fixed chart height; width auto-tracks the parent container's size via ResizeObserver. */
|
|
759
|
+
height?: number;
|
|
760
|
+
}
|
|
761
|
+
/**
|
|
762
|
+
* Client-rendered pie/donut chart for dashboards: auto-sizes to its parent (via
|
|
763
|
+
* `@visx/responsive`'s `ParentSize`), and adds per-slice hover emphasis, a tooltip, and a
|
|
764
|
+
* click-to-toggle legend. Requires client-side JS ("use client") — for server components or
|
|
765
|
+
* static output where no interaction is needed, use the static `PieChart` instead.
|
|
766
|
+
*
|
|
767
|
+
* Unlike Line/Bar/AreaChart's legend toggle (which just removes a series), hiding a slice here
|
|
768
|
+
* *redistributes* the remaining slices' percentages, since a pie's slices must sum to 100 — see
|
|
769
|
+
* `computePercentages` in `PieChart.render.ts`, re-run over only the still-visible slices.
|
|
770
|
+
*/
|
|
771
|
+
declare function InteractivePieChart({ data, innerRadius, showLabels, height }: InteractivePieChartProps): ReactElement;
|
|
772
|
+
|
|
773
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, AreaChart, type AreaChartBaseProps, type AreaChartDataPoint, type AreaChartMargin, type AreaChartProps, type AreaChartSeries, type AreaChartXScaleType, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartBaseProps, type BarChartDataPoint, type BarChartLayout, type BarChartMargin, type BarChartProps, type BarChartSeries, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, type CardElevation, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, DataGrid, type DataGridColumn, type DataGridExportOptions, type DataGridHandle, type DataGridProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Input, type InputProps, InteractiveAreaChart, type InteractiveAreaChartProps, InteractiveBarChart, type InteractiveBarChartProps, InteractiveLineChart, type InteractiveLineChartProps, InteractivePieChart, type InteractivePieChartProps, Label, type LabelProps, LineChart, type LineChartBaseProps, type LineChartDataPoint, type LineChartMargin, type LineChartProps, type LineChartSeries, type LineChartXScaleType, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PieChart, type PieChartBaseProps, type PieChartDataPoint, type PieChartProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, type SliderValue, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastContextValue, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TreeViewSelectable, type UseCommandPaletteShortcutOptions, useCommandPaletteShortcut, useToast };
|