hazo_ui 2.16.0 → 2.17.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/CHANGE_LOG.md +47 -0
- package/README.md +247 -0
- package/dist/index.cjs +810 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +200 -1
- package/dist/index.d.ts +200 -1
- package/dist/index.js +803 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1536,4 +1536,203 @@ interface HazoUiTableProps<TRow extends object = any> {
|
|
|
1536
1536
|
|
|
1537
1537
|
declare function HazoUiTable<TRow extends object = any>(props: HazoUiTableProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
1538
1538
|
|
|
1539
|
-
|
|
1539
|
+
/**
|
|
1540
|
+
* Public types for hazo_ui_charts. Keep dependency-free so consumers can
|
|
1541
|
+
* import these without pulling in React types they don't need.
|
|
1542
|
+
*/
|
|
1543
|
+
/** One series-value. `null` is a missing point — the chart will skip it. */
|
|
1544
|
+
type ChartDataPoint = number | null;
|
|
1545
|
+
/** Ordered time-series for a single line / area / sparkline. */
|
|
1546
|
+
type ChartDataSeries = ChartDataPoint[];
|
|
1547
|
+
/** Multi-line chart series with its own color + label. */
|
|
1548
|
+
interface MultiSeries {
|
|
1549
|
+
label: string;
|
|
1550
|
+
color: string;
|
|
1551
|
+
data: ChartDataSeries;
|
|
1552
|
+
}
|
|
1553
|
+
/** Single stacked bar — one column on the X-axis. */
|
|
1554
|
+
interface StackedBar {
|
|
1555
|
+
/** Display label below the bar (date, category, etc.). */
|
|
1556
|
+
label: string;
|
|
1557
|
+
/** Top-to-bottom band order. `value` is the band's contribution to the bar's total height. */
|
|
1558
|
+
segments: {
|
|
1559
|
+
value: number;
|
|
1560
|
+
color: string;
|
|
1561
|
+
}[];
|
|
1562
|
+
}
|
|
1563
|
+
/** Date-range selector option. Value is opaque to the component. */
|
|
1564
|
+
interface DateRangeOption {
|
|
1565
|
+
value: string;
|
|
1566
|
+
label: string;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
/**
|
|
1570
|
+
* Sparkline — tiny single-series line for KPI cards.
|
|
1571
|
+
*
|
|
1572
|
+
* Intentionally axisless (per PRD §6b — sparklines are for trend *shape*,
|
|
1573
|
+
* the value is shown above them in the card itself). 12% area fill makes
|
|
1574
|
+
* the trajectory readable even at 40px high; a 2px dot marks the latest
|
|
1575
|
+
* non-null point so "now" is obvious.
|
|
1576
|
+
*
|
|
1577
|
+
* SVG renders edge-to-edge with `preserveAspectRatio="none"` so the line
|
|
1578
|
+
* stretches across whatever width the parent gives it.
|
|
1579
|
+
*/
|
|
1580
|
+
|
|
1581
|
+
interface SparklineProps {
|
|
1582
|
+
/** Time-series. `null` entries are skipped. */
|
|
1583
|
+
data: ChartDataSeries;
|
|
1584
|
+
/** Stroke / dot / area-fill color. */
|
|
1585
|
+
color: string;
|
|
1586
|
+
/** Container className passthrough. */
|
|
1587
|
+
className?: string;
|
|
1588
|
+
/** Override the default 40px height. */
|
|
1589
|
+
height?: number;
|
|
1590
|
+
}
|
|
1591
|
+
declare function Sparkline({ data, color, className, height, }: SparklineProps): React.ReactElement;
|
|
1592
|
+
|
|
1593
|
+
/**
|
|
1594
|
+
* InverseSparkline — tiny axisless line where lower = better.
|
|
1595
|
+
*
|
|
1596
|
+
* Used for GSC position trends: rank 1 is best, rank 50 is bad, so the Y
|
|
1597
|
+
* axis is flipped relative to a regular sparkline. No area fill, no dot —
|
|
1598
|
+
* the only signal is the line's direction. 62×18 by default matches the
|
|
1599
|
+
* "scrollable list of queries" layout in the GSC deep-dive mockup.
|
|
1600
|
+
*/
|
|
1601
|
+
|
|
1602
|
+
interface InverseSparklineProps {
|
|
1603
|
+
/** Time-series (e.g. GSC avg-position values). `null` is skipped. */
|
|
1604
|
+
data: ChartDataSeries;
|
|
1605
|
+
/** Stroke color. */
|
|
1606
|
+
color: string;
|
|
1607
|
+
/** Container className passthrough. */
|
|
1608
|
+
className?: string;
|
|
1609
|
+
/** Override default 62px width. */
|
|
1610
|
+
width?: number;
|
|
1611
|
+
/** Override default 18px height. */
|
|
1612
|
+
height?: number;
|
|
1613
|
+
}
|
|
1614
|
+
declare function InverseSparkline({ data, color, className, width, height, }: InverseSparklineProps): React.ReactElement;
|
|
1615
|
+
|
|
1616
|
+
/**
|
|
1617
|
+
* LineChart — full-anatomy single-series chart (PRD §6b spec).
|
|
1618
|
+
*
|
|
1619
|
+
* ┌─────────────────────────────────────────────┐
|
|
1620
|
+
* │ Y-max ─ - - - - - - - - - - - - - - - - - │ ← three dashed gridlines
|
|
1621
|
+
* │ Y-mid ─ - - - - - - - - - - ╭──•value │ ← marker dot + label
|
|
1622
|
+
* │ Y-min ─ - - - - - - -╭──────╯ │ + dashed guide to Y-axis
|
|
1623
|
+
* │ └───────────────────────────────── │
|
|
1624
|
+
* │ Mar 4 Mar 10 Mar 17 │ ← three X labels
|
|
1625
|
+
* └─────────────────────────────────────────────┘
|
|
1626
|
+
*
|
|
1627
|
+
* Hover anywhere over the plot area to surface a cursor line + value
|
|
1628
|
+
* bubble at the nearest data point. Set `showTooltip={false}` to disable
|
|
1629
|
+
* — useful when the chart is small or non-interactive (print export).
|
|
1630
|
+
*/
|
|
1631
|
+
|
|
1632
|
+
interface LineChartProps {
|
|
1633
|
+
/** Time-series. `null` entries are gaps in the line. */
|
|
1634
|
+
data: ChartDataSeries;
|
|
1635
|
+
/** Labels for the X-axis. Length should match `data`. */
|
|
1636
|
+
dates: string[];
|
|
1637
|
+
/** Stroke / area / marker color. */
|
|
1638
|
+
color: string;
|
|
1639
|
+
/** Override default 360-wide viewBox. */
|
|
1640
|
+
width?: number;
|
|
1641
|
+
/** Override default 130-tall viewBox. */
|
|
1642
|
+
height?: number;
|
|
1643
|
+
/** Optional suffix shown next to the current-value label (e.g. "%"). */
|
|
1644
|
+
unit?: string;
|
|
1645
|
+
/** Disable hover tooltip. Defaults to enabled. */
|
|
1646
|
+
showTooltip?: boolean;
|
|
1647
|
+
/** Container className passthrough. */
|
|
1648
|
+
className?: string;
|
|
1649
|
+
}
|
|
1650
|
+
declare function LineChart({ data, dates, color, width, height, unit, showTooltip, className, }: LineChartProps): React.ReactElement;
|
|
1651
|
+
|
|
1652
|
+
/**
|
|
1653
|
+
* MultiLineChart — multi-series chart with shared Y-axis.
|
|
1654
|
+
*
|
|
1655
|
+
* No area fill (PRD §6b — "multi-series uses lines only to avoid color
|
|
1656
|
+
* collisions"). Each series gets a per-endpoint marker + value label so
|
|
1657
|
+
* the latest value is readable without hovering. Hover surfaces a single
|
|
1658
|
+
* cursor line with one bubble per series stacked vertically.
|
|
1659
|
+
*/
|
|
1660
|
+
|
|
1661
|
+
interface MultiLineChartProps {
|
|
1662
|
+
series: MultiSeries[];
|
|
1663
|
+
dates: string[];
|
|
1664
|
+
width?: number;
|
|
1665
|
+
height?: number;
|
|
1666
|
+
showTooltip?: boolean;
|
|
1667
|
+
showLegend?: boolean;
|
|
1668
|
+
className?: string;
|
|
1669
|
+
}
|
|
1670
|
+
declare function MultiLineChart({ series, dates, width, height, showTooltip, showLegend, className, }: MultiLineChartProps): React.ReactElement;
|
|
1671
|
+
|
|
1672
|
+
/**
|
|
1673
|
+
* StackedBars — one vertical bar per X position, each split into top-to-bottom
|
|
1674
|
+
* colored bands.
|
|
1675
|
+
*
|
|
1676
|
+
* Generic enough for any distribution-over-time visual: GSC position buckets
|
|
1677
|
+
* (Top 3 / 4-10 / 11-20 / 20+), traffic source mix (organic / direct / referral),
|
|
1678
|
+
* etc. The component is data-driven via `bars: StackedBar[]` — the consumer
|
|
1679
|
+
* picks the segment colors, the labels, and the band order.
|
|
1680
|
+
*/
|
|
1681
|
+
|
|
1682
|
+
interface StackedBarsProps {
|
|
1683
|
+
bars: StackedBar[];
|
|
1684
|
+
width?: number;
|
|
1685
|
+
height?: number;
|
|
1686
|
+
/** Show Y-axis ticks (max, mid, 0). Defaults to true. */
|
|
1687
|
+
showYAxis?: boolean;
|
|
1688
|
+
className?: string;
|
|
1689
|
+
}
|
|
1690
|
+
declare function StackedBars({ bars, width, height, showYAxis, className, }: StackedBarsProps): React.ReactElement;
|
|
1691
|
+
|
|
1692
|
+
/**
|
|
1693
|
+
* DateRangeSelector — segmented control for picking a chart's time window.
|
|
1694
|
+
*
|
|
1695
|
+
* Framework-agnostic: emits the new value via `onChange`. The consumer
|
|
1696
|
+
* decides whether to write it to a URL query param (Next.js router), a
|
|
1697
|
+
* local state, or a global store — hazo_ui has no opinion on routing.
|
|
1698
|
+
*
|
|
1699
|
+
* Visually a row of pills, the active one tinted with the primary color.
|
|
1700
|
+
* Designed to sit immediately above a chart on the Trends / Bing / GA4
|
|
1701
|
+
* pages where users need to flip between "14d", "30d", and "since launch".
|
|
1702
|
+
*/
|
|
1703
|
+
|
|
1704
|
+
interface DateRangeSelectorProps {
|
|
1705
|
+
value: string;
|
|
1706
|
+
onChange: (value: string) => void;
|
|
1707
|
+
options: DateRangeOption[];
|
|
1708
|
+
className?: string;
|
|
1709
|
+
/** Aria label for the whole group. Defaults to "Date range". */
|
|
1710
|
+
ariaLabel?: string;
|
|
1711
|
+
}
|
|
1712
|
+
declare function DateRangeSelector({ value, onChange, options, className, ariaLabel, }: DateRangeSelectorProps): React.ReactElement;
|
|
1713
|
+
|
|
1714
|
+
/**
|
|
1715
|
+
* Number/date formatters shared across hazo_ui_charts.
|
|
1716
|
+
*
|
|
1717
|
+
* Kept as pure, zero-dependency helpers so the chart primitives stay
|
|
1718
|
+
* deterministic across SSR/CSR. Locale is intentionally pinned (the same
|
|
1719
|
+
* lesson as v2.15.1's Intl fix on HazoUiTable).
|
|
1720
|
+
*/
|
|
1721
|
+
/**
|
|
1722
|
+
* Compact number formatter used on Y-axis ticks, marker labels, and legends.
|
|
1723
|
+
*
|
|
1724
|
+
* null / undefined / NaN → empty string
|
|
1725
|
+
* ≥ 1,000 → `1.0k`, `12.3k`, `1.0M`
|
|
1726
|
+
* integer → no decimals (`14`, `0`)
|
|
1727
|
+
* fractional → one decimal (`5.7`)
|
|
1728
|
+
*
|
|
1729
|
+
* Strings pass through unchanged so callers can pre-format if needed.
|
|
1730
|
+
*/
|
|
1731
|
+
declare function format_num(n: number | null | undefined | string): string;
|
|
1732
|
+
/**
|
|
1733
|
+
* Pick three index positions for X-axis labels: start, middle, end.
|
|
1734
|
+
* Returns `[0, mid, last]` for length ≥ 3; falls back gracefully below that.
|
|
1735
|
+
*/
|
|
1736
|
+
declare function pick_x_label_indices(length: number): [number, number, number];
|
|
1737
|
+
|
|
1738
|
+
export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AnimationPreset, type BaseCommandInputProps, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, type ChartDataSeries, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type CommandEditContext, type CommandItem$1 as CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DateRangeOption, DateRangeSelector, type DateRangeSelectorProps, type DialogVariant, 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, EmptyState, type EmptyStateProps, ErrorBanner, type ErrorBannerProps, type ErrorBannerSeverity, ErrorPage, type ErrorPageProps, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiKanban, HazoUiKanbanFilter, type HazoUiKanbanFilterProps, type HazoUiKanbanProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, type HazoUiPillRadioItem, type HazoUiPillRadioProps, HazoUiRte, type HazoUiRteProps, HazoUiTable, type HazoUiTablePagination, type HazoUiTableProps, type HazoUiTableServerLoadArgs, type HazoUiTableServerLoadResult, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, HazoUiToaster, type HazoUiToasterProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InsertedCommand, InverseSparkline, type InverseSparklineProps, type KanbanAnnouncements, type KanbanColumn, type KanbanEditorCtx, type KanbanEditorField, type KanbanEditorFieldType, type KanbanFilterValue, type KanbanItem, type KanbanMoveEvent, type KanbanMoveHandle, type KanbanPriority, type KanbanReorderEvent, type KanbanSaveEvent, Label, LineChart, type LineChartProps, LoadingTimeout, type LoadingTimeoutProps, MultiLineChart, type MultiLineChartProps, type MultiSeries, Popover, PopoverContent, PopoverTrigger, type PrefixColor, type PrefixConfig, ProgressiveImage, type ProgressiveImageProps, RadioGroup, RadioGroupItem, type RteAttachment, type RteOutput, type RteVariable, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, type SkeletonBarProps, SkeletonCircle, type SkeletonCircleProps, SkeletonGroup, type SkeletonGroupProps, SkeletonRect, type SkeletonRectProps, type SortConfig, type SortField, Sparkline, type SparklineProps, Spinner, type StackedBar, StackedBars, type StackedBarsProps, type SuggestionState, Switch, Table, TableBody, TableCaption, TableCell, type TableColumn, type TableFilter, TableFooter, type TableFormatter, TableHead, TableHeader, TableRow, type TableSort, type TableSortEntry, type TableSortProp, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ToastOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseErrorDisplayResult, type UseLoadingStateResult, applyKanbanFilter, buttonGroupVariants, create_command_suggestion_extension, errorToast, format_num, get_hazo_ui_config, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, successToast, text_to_tiptap_content, toggleVariants, useErrorDisplay, useLoadingState, useMediaQuery };
|
package/dist/index.d.ts
CHANGED
|
@@ -1536,4 +1536,203 @@ interface HazoUiTableProps<TRow extends object = any> {
|
|
|
1536
1536
|
|
|
1537
1537
|
declare function HazoUiTable<TRow extends object = any>(props: HazoUiTableProps<TRow>): react_jsx_runtime.JSX.Element;
|
|
1538
1538
|
|
|
1539
|
-
|
|
1539
|
+
/**
|
|
1540
|
+
* Public types for hazo_ui_charts. Keep dependency-free so consumers can
|
|
1541
|
+
* import these without pulling in React types they don't need.
|
|
1542
|
+
*/
|
|
1543
|
+
/** One series-value. `null` is a missing point — the chart will skip it. */
|
|
1544
|
+
type ChartDataPoint = number | null;
|
|
1545
|
+
/** Ordered time-series for a single line / area / sparkline. */
|
|
1546
|
+
type ChartDataSeries = ChartDataPoint[];
|
|
1547
|
+
/** Multi-line chart series with its own color + label. */
|
|
1548
|
+
interface MultiSeries {
|
|
1549
|
+
label: string;
|
|
1550
|
+
color: string;
|
|
1551
|
+
data: ChartDataSeries;
|
|
1552
|
+
}
|
|
1553
|
+
/** Single stacked bar — one column on the X-axis. */
|
|
1554
|
+
interface StackedBar {
|
|
1555
|
+
/** Display label below the bar (date, category, etc.). */
|
|
1556
|
+
label: string;
|
|
1557
|
+
/** Top-to-bottom band order. `value` is the band's contribution to the bar's total height. */
|
|
1558
|
+
segments: {
|
|
1559
|
+
value: number;
|
|
1560
|
+
color: string;
|
|
1561
|
+
}[];
|
|
1562
|
+
}
|
|
1563
|
+
/** Date-range selector option. Value is opaque to the component. */
|
|
1564
|
+
interface DateRangeOption {
|
|
1565
|
+
value: string;
|
|
1566
|
+
label: string;
|
|
1567
|
+
}
|
|
1568
|
+
|
|
1569
|
+
/**
|
|
1570
|
+
* Sparkline — tiny single-series line for KPI cards.
|
|
1571
|
+
*
|
|
1572
|
+
* Intentionally axisless (per PRD §6b — sparklines are for trend *shape*,
|
|
1573
|
+
* the value is shown above them in the card itself). 12% area fill makes
|
|
1574
|
+
* the trajectory readable even at 40px high; a 2px dot marks the latest
|
|
1575
|
+
* non-null point so "now" is obvious.
|
|
1576
|
+
*
|
|
1577
|
+
* SVG renders edge-to-edge with `preserveAspectRatio="none"` so the line
|
|
1578
|
+
* stretches across whatever width the parent gives it.
|
|
1579
|
+
*/
|
|
1580
|
+
|
|
1581
|
+
interface SparklineProps {
|
|
1582
|
+
/** Time-series. `null` entries are skipped. */
|
|
1583
|
+
data: ChartDataSeries;
|
|
1584
|
+
/** Stroke / dot / area-fill color. */
|
|
1585
|
+
color: string;
|
|
1586
|
+
/** Container className passthrough. */
|
|
1587
|
+
className?: string;
|
|
1588
|
+
/** Override the default 40px height. */
|
|
1589
|
+
height?: number;
|
|
1590
|
+
}
|
|
1591
|
+
declare function Sparkline({ data, color, className, height, }: SparklineProps): React.ReactElement;
|
|
1592
|
+
|
|
1593
|
+
/**
|
|
1594
|
+
* InverseSparkline — tiny axisless line where lower = better.
|
|
1595
|
+
*
|
|
1596
|
+
* Used for GSC position trends: rank 1 is best, rank 50 is bad, so the Y
|
|
1597
|
+
* axis is flipped relative to a regular sparkline. No area fill, no dot —
|
|
1598
|
+
* the only signal is the line's direction. 62×18 by default matches the
|
|
1599
|
+
* "scrollable list of queries" layout in the GSC deep-dive mockup.
|
|
1600
|
+
*/
|
|
1601
|
+
|
|
1602
|
+
interface InverseSparklineProps {
|
|
1603
|
+
/** Time-series (e.g. GSC avg-position values). `null` is skipped. */
|
|
1604
|
+
data: ChartDataSeries;
|
|
1605
|
+
/** Stroke color. */
|
|
1606
|
+
color: string;
|
|
1607
|
+
/** Container className passthrough. */
|
|
1608
|
+
className?: string;
|
|
1609
|
+
/** Override default 62px width. */
|
|
1610
|
+
width?: number;
|
|
1611
|
+
/** Override default 18px height. */
|
|
1612
|
+
height?: number;
|
|
1613
|
+
}
|
|
1614
|
+
declare function InverseSparkline({ data, color, className, width, height, }: InverseSparklineProps): React.ReactElement;
|
|
1615
|
+
|
|
1616
|
+
/**
|
|
1617
|
+
* LineChart — full-anatomy single-series chart (PRD §6b spec).
|
|
1618
|
+
*
|
|
1619
|
+
* ┌─────────────────────────────────────────────┐
|
|
1620
|
+
* │ Y-max ─ - - - - - - - - - - - - - - - - - │ ← three dashed gridlines
|
|
1621
|
+
* │ Y-mid ─ - - - - - - - - - - ╭──•value │ ← marker dot + label
|
|
1622
|
+
* │ Y-min ─ - - - - - - -╭──────╯ │ + dashed guide to Y-axis
|
|
1623
|
+
* │ └───────────────────────────────── │
|
|
1624
|
+
* │ Mar 4 Mar 10 Mar 17 │ ← three X labels
|
|
1625
|
+
* └─────────────────────────────────────────────┘
|
|
1626
|
+
*
|
|
1627
|
+
* Hover anywhere over the plot area to surface a cursor line + value
|
|
1628
|
+
* bubble at the nearest data point. Set `showTooltip={false}` to disable
|
|
1629
|
+
* — useful when the chart is small or non-interactive (print export).
|
|
1630
|
+
*/
|
|
1631
|
+
|
|
1632
|
+
interface LineChartProps {
|
|
1633
|
+
/** Time-series. `null` entries are gaps in the line. */
|
|
1634
|
+
data: ChartDataSeries;
|
|
1635
|
+
/** Labels for the X-axis. Length should match `data`. */
|
|
1636
|
+
dates: string[];
|
|
1637
|
+
/** Stroke / area / marker color. */
|
|
1638
|
+
color: string;
|
|
1639
|
+
/** Override default 360-wide viewBox. */
|
|
1640
|
+
width?: number;
|
|
1641
|
+
/** Override default 130-tall viewBox. */
|
|
1642
|
+
height?: number;
|
|
1643
|
+
/** Optional suffix shown next to the current-value label (e.g. "%"). */
|
|
1644
|
+
unit?: string;
|
|
1645
|
+
/** Disable hover tooltip. Defaults to enabled. */
|
|
1646
|
+
showTooltip?: boolean;
|
|
1647
|
+
/** Container className passthrough. */
|
|
1648
|
+
className?: string;
|
|
1649
|
+
}
|
|
1650
|
+
declare function LineChart({ data, dates, color, width, height, unit, showTooltip, className, }: LineChartProps): React.ReactElement;
|
|
1651
|
+
|
|
1652
|
+
/**
|
|
1653
|
+
* MultiLineChart — multi-series chart with shared Y-axis.
|
|
1654
|
+
*
|
|
1655
|
+
* No area fill (PRD §6b — "multi-series uses lines only to avoid color
|
|
1656
|
+
* collisions"). Each series gets a per-endpoint marker + value label so
|
|
1657
|
+
* the latest value is readable without hovering. Hover surfaces a single
|
|
1658
|
+
* cursor line with one bubble per series stacked vertically.
|
|
1659
|
+
*/
|
|
1660
|
+
|
|
1661
|
+
interface MultiLineChartProps {
|
|
1662
|
+
series: MultiSeries[];
|
|
1663
|
+
dates: string[];
|
|
1664
|
+
width?: number;
|
|
1665
|
+
height?: number;
|
|
1666
|
+
showTooltip?: boolean;
|
|
1667
|
+
showLegend?: boolean;
|
|
1668
|
+
className?: string;
|
|
1669
|
+
}
|
|
1670
|
+
declare function MultiLineChart({ series, dates, width, height, showTooltip, showLegend, className, }: MultiLineChartProps): React.ReactElement;
|
|
1671
|
+
|
|
1672
|
+
/**
|
|
1673
|
+
* StackedBars — one vertical bar per X position, each split into top-to-bottom
|
|
1674
|
+
* colored bands.
|
|
1675
|
+
*
|
|
1676
|
+
* Generic enough for any distribution-over-time visual: GSC position buckets
|
|
1677
|
+
* (Top 3 / 4-10 / 11-20 / 20+), traffic source mix (organic / direct / referral),
|
|
1678
|
+
* etc. The component is data-driven via `bars: StackedBar[]` — the consumer
|
|
1679
|
+
* picks the segment colors, the labels, and the band order.
|
|
1680
|
+
*/
|
|
1681
|
+
|
|
1682
|
+
interface StackedBarsProps {
|
|
1683
|
+
bars: StackedBar[];
|
|
1684
|
+
width?: number;
|
|
1685
|
+
height?: number;
|
|
1686
|
+
/** Show Y-axis ticks (max, mid, 0). Defaults to true. */
|
|
1687
|
+
showYAxis?: boolean;
|
|
1688
|
+
className?: string;
|
|
1689
|
+
}
|
|
1690
|
+
declare function StackedBars({ bars, width, height, showYAxis, className, }: StackedBarsProps): React.ReactElement;
|
|
1691
|
+
|
|
1692
|
+
/**
|
|
1693
|
+
* DateRangeSelector — segmented control for picking a chart's time window.
|
|
1694
|
+
*
|
|
1695
|
+
* Framework-agnostic: emits the new value via `onChange`. The consumer
|
|
1696
|
+
* decides whether to write it to a URL query param (Next.js router), a
|
|
1697
|
+
* local state, or a global store — hazo_ui has no opinion on routing.
|
|
1698
|
+
*
|
|
1699
|
+
* Visually a row of pills, the active one tinted with the primary color.
|
|
1700
|
+
* Designed to sit immediately above a chart on the Trends / Bing / GA4
|
|
1701
|
+
* pages where users need to flip between "14d", "30d", and "since launch".
|
|
1702
|
+
*/
|
|
1703
|
+
|
|
1704
|
+
interface DateRangeSelectorProps {
|
|
1705
|
+
value: string;
|
|
1706
|
+
onChange: (value: string) => void;
|
|
1707
|
+
options: DateRangeOption[];
|
|
1708
|
+
className?: string;
|
|
1709
|
+
/** Aria label for the whole group. Defaults to "Date range". */
|
|
1710
|
+
ariaLabel?: string;
|
|
1711
|
+
}
|
|
1712
|
+
declare function DateRangeSelector({ value, onChange, options, className, ariaLabel, }: DateRangeSelectorProps): React.ReactElement;
|
|
1713
|
+
|
|
1714
|
+
/**
|
|
1715
|
+
* Number/date formatters shared across hazo_ui_charts.
|
|
1716
|
+
*
|
|
1717
|
+
* Kept as pure, zero-dependency helpers so the chart primitives stay
|
|
1718
|
+
* deterministic across SSR/CSR. Locale is intentionally pinned (the same
|
|
1719
|
+
* lesson as v2.15.1's Intl fix on HazoUiTable).
|
|
1720
|
+
*/
|
|
1721
|
+
/**
|
|
1722
|
+
* Compact number formatter used on Y-axis ticks, marker labels, and legends.
|
|
1723
|
+
*
|
|
1724
|
+
* null / undefined / NaN → empty string
|
|
1725
|
+
* ≥ 1,000 → `1.0k`, `12.3k`, `1.0M`
|
|
1726
|
+
* integer → no decimals (`14`, `0`)
|
|
1727
|
+
* fractional → one decimal (`5.7`)
|
|
1728
|
+
*
|
|
1729
|
+
* Strings pass through unchanged so callers can pre-format if needed.
|
|
1730
|
+
*/
|
|
1731
|
+
declare function format_num(n: number | null | undefined | string): string;
|
|
1732
|
+
/**
|
|
1733
|
+
* Pick three index positions for X-axis labels: start, middle, end.
|
|
1734
|
+
* Returns `[0, mid, last]` for length ≥ 3; falls back gracefully below that.
|
|
1735
|
+
*/
|
|
1736
|
+
declare function pick_x_label_indices(length: number): [number, number, number];
|
|
1737
|
+
|
|
1738
|
+
export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AnimationPreset, type BaseCommandInputProps, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, type ChartDataSeries, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type CommandEditContext, type CommandItem$1 as CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DateRangeOption, DateRangeSelector, type DateRangeSelectorProps, type DialogVariant, 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, EmptyState, type EmptyStateProps, ErrorBanner, type ErrorBannerProps, type ErrorBannerSeverity, ErrorPage, type ErrorPageProps, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiKanban, HazoUiKanbanFilter, type HazoUiKanbanFilterProps, type HazoUiKanbanProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, type HazoUiPillRadioItem, type HazoUiPillRadioProps, HazoUiRte, type HazoUiRteProps, HazoUiTable, type HazoUiTablePagination, type HazoUiTableProps, type HazoUiTableServerLoadArgs, type HazoUiTableServerLoadResult, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, HazoUiToaster, type HazoUiToasterProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InsertedCommand, InverseSparkline, type InverseSparklineProps, type KanbanAnnouncements, type KanbanColumn, type KanbanEditorCtx, type KanbanEditorField, type KanbanEditorFieldType, type KanbanFilterValue, type KanbanItem, type KanbanMoveEvent, type KanbanMoveHandle, type KanbanPriority, type KanbanReorderEvent, type KanbanSaveEvent, Label, LineChart, type LineChartProps, LoadingTimeout, type LoadingTimeoutProps, MultiLineChart, type MultiLineChartProps, type MultiSeries, Popover, PopoverContent, PopoverTrigger, type PrefixColor, type PrefixConfig, ProgressiveImage, type ProgressiveImageProps, RadioGroup, RadioGroupItem, type RteAttachment, type RteOutput, type RteVariable, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, type SkeletonBarProps, SkeletonCircle, type SkeletonCircleProps, SkeletonGroup, type SkeletonGroupProps, SkeletonRect, type SkeletonRectProps, type SortConfig, type SortField, Sparkline, type SparklineProps, Spinner, type StackedBar, StackedBars, type StackedBarsProps, type SuggestionState, Switch, Table, TableBody, TableCaption, TableCell, type TableColumn, type TableFilter, TableFooter, type TableFormatter, TableHead, TableHeader, TableRow, type TableSort, type TableSortEntry, type TableSortProp, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ToastOptions, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseErrorDisplayResult, type UseLoadingStateResult, applyKanbanFilter, buttonGroupVariants, create_command_suggestion_extension, errorToast, format_num, get_hazo_ui_config, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, successToast, text_to_tiptap_content, toggleVariants, useErrorDisplay, useLoadingState, useMediaQuery };
|