canny-ui-react 3.0.0 → 4.0.0

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Numeric count shown in the indicator. */
+    count?: number;
+    /** Render a small dot instead of a number. */
+    dot?: boolean;
+    /** Cap displayed count; values above show `{max}+`. Default 99. */
+    max?: number;
+    /** Show the indicator even when count is 0. Default false. */
+    showZero?: boolean;
+    /** Semantic color. Default `'danger'`. */
+    color?: BadgeColor;
+    /** Corner the indicator anchors to (ignored when standalone). Default `'top-right'`. */
+    placement?: BadgePlacement;
+    /** Render the indicator inline with no anchored child. */
+    standalone?: boolean;
+    children?: ReactNode;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeColor, BadgePlacement } from './Badge';

package/dist/components/Charts/BarChart.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+export interface BarSeries {
+    /** Key into each datum for this series' value. */
+    key: string;
+    /** Legend / tooltip label. Defaults to `key`. */
+    label?: string;
+    /** Override the series color. */
+    color?: string;
+}
+export interface BarChartProps<D extends Record<string, unknown> = Record<string, unknown>> {
+    data: D[];
+    /** Key for the category label on the x-axis. */
+    xKey: string;
+    series: BarSeries[];
+    height?: number;
+    /** Stack the series instead of grouping them side by side. */
+    stacked?: boolean;
+    grid?: boolean;
+    legend?: boolean;
+    /** Format y-axis tick values. */
+    yTickFormatter?: (value: number) => string;
+    /** Format x-axis category labels. */
+    xTickFormatter?: (value: string) => string;
+    /** Custom tooltip body for a hovered category. */
+    renderTooltip?: (params: {
+        label: string;
+        datum: D;
+    }) => ReactNode;
+    className?: string;
+}
+export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/LineChart.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { BarSeries } from './BarChart';
+export interface LineChartProps<D extends Record<string, unknown> = Record<string, unknown>> {
+    data: D[];
+    xKey: string;
+    series: BarSeries[];
+    height?: number;
+    /** Fill the area under each line. */
+    area?: boolean;
+    /** Stack the series (area charts). */
+    stacked?: boolean;
+    /** Show point markers. */
+    dots?: boolean;
+    grid?: boolean;
+    legend?: boolean;
+    yTickFormatter?: (value: number) => string;
+    xTickFormatter?: (value: string) => string;
+    renderTooltip?: (params: {
+        label: string;
+        datum: D;
+    }) => ReactNode;
+    className?: string;
+}
+export declare function LineChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;
+export declare function AreaChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/PieChart.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface PieDatum {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface PieChartProps {
+    data: PieDatum[];
+    height?: number;
+    /** Inner radius as a fraction of the outer radius (0 = pie, 0.6 = donut). */
+    innerRadius?: number;
+    legend?: boolean;
+    /** Custom tooltip body for a hovered slice. */
+    renderTooltip?: (params: {
+        datum: PieDatum;
+        percent: number;
+    }) => ReactNode;
+    /** Center label (e.g. a total) for donut charts. */
+    centerLabel?: ReactNode;
+    className?: string;
+}
+export declare function PieChart({ data, height, innerRadius, legend, renderTooltip, centerLabel, className, }: PieChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ResponsiveContainer.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface ResponsiveContainerProps {
+    /** Chart height in px. */
+    height?: number;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Sizing wrapper kept for `recharts` compatibility. Canny charts already fill
+ * their parent's width; this passes `height` down and stretches to 100% width.
+ */
+export declare function ResponsiveContainer({ height, children, className }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/chartUtils.d.ts

@@ -0,0 +1,16 @@
+import type { RefObject } from 'react';
+/** Default palette — token-driven series colors, cycled by index. */
+export declare const CHART_COLORS: string[];
+export declare function seriesColor(index: number, explicit?: string): string;
+/**
+ * Measures the host element's width with a ResizeObserver and returns a fluid
+ * width. Falls back to `fallback` when measurement is unavailable (SSR/jsdom).
+ */
+export declare function useChartWidth(fallback?: number): [RefObject<HTMLDivElement | null>, number];
+/** "Nice" max + evenly spaced ticks for a [0, max] axis. */
+export declare function niceTicks(max: number, count?: number): {
+    max: number;
+    ticks: number[];
+};
+/** SVG path for a (possibly donut) pie slice. Angles in radians, 0 at 12 o'clock. */
+export declare function arcPath(cx: number, cy: number, rOuter: number, rInner: number, startAngle: number, endAngle: number): string;

package/dist/components/Charts/index.d.ts

@@ -0,0 +1,9 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps, BarSeries } from './BarChart';
+export { LineChart, AreaChart } from './LineChart';
+export type { LineChartProps } from './LineChart';
+export { PieChart } from './PieChart';
+export type { PieChartProps, PieDatum } from './PieChart';
+export { ResponsiveContainer } from './ResponsiveContainer';
+export type { ResponsiveContainerProps } from './ResponsiveContainer';
+export { CHART_COLORS } from './chartUtils';

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+export interface ConfirmDialogProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Called with the next open state (e.g. on Esc, backdrop, or cancel). */
+    onOpenChange: (open: boolean) => void;
+    /** Dialog heading. */
+    title: ReactNode;
+    /** Body copy. Ignored when `children` is provided. */
+    message?: ReactNode;
+    /** Custom body; overrides `message`. */
+    children?: ReactNode;
+    /** Confirm button label. Default `'Confirm'`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `'Cancel'`. */
+    cancelLabel?: string;
+    /** Render the confirm button in the danger color. */
+    danger?: boolean;
+    /** Show a spinner on confirm and disable both buttons. */
+    loading?: boolean;
+    /** Fired when the confirm button is clicked. */
+    onConfirm: () => void;
+    /** Fired when the cancel button is clicked (before close). */
+    onCancel?: () => void;
+    className?: string;
+}
+/**
+ * ConfirmDialog — a small Dialog preset for destructive / confirmation prompts.
+ * Composes the base `Dialog` and `Button`.
+ */
+export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmDialog/index.d.ts

@@ -0,0 +1,4 @@
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';
+export { useConfirm } from './useConfirm';
+export type { ConfirmOptions } from './useConfirm';

package/dist/components/ConfirmDialog/useConfirm.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface ConfirmOptions {
+    title: ReactNode;
+    message?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+}
+/**
+ * Imperative confirmation. Render `confirmDialog` once in the tree, then
+ * `await confirm({ title, message })` to get a boolean.
+ */
+export declare function useConfirm(): {
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    confirmDialog: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,69 @@
+import type { ReactElement, ReactNode, Ref } from 'react';
+export type DataTableAlign = 'left' | 'center' | 'right';
+export type RowId = string | number;
+export interface DataTableColumn<R = Record<string, unknown>> {
+    /** Key into the row (and the sort field). Use `renderCell` for non-primitive values. */
+    field: string;
+    /** Column header text. Defaults to `field`. */
+    headerName?: string;
+    /** Fixed width in px. */
+    width?: number;
+    /** Proportional width (flex-grow). Ignored when `width` is set. */
+    flex?: number;
+    /** Cell text alignment. */
+    align?: DataTableAlign;
+    /** Header text alignment. Defaults to `align`. */
+    headerAlign?: DataTableAlign;
+    /** Allow sorting on this column. */
+    sortable?: boolean;
+    /** Allow drag-to-resize on this column. Default `true`. */
+    resizable?: boolean;
+    /** Custom cell renderer. */
+    renderCell?: (params: {
+        row: R;
+        value: unknown;
+        field: string;
+    }) => ReactNode;
+    /** Derive the cell value from the row instead of `row[field]`. */
+    valueGetter?: (params: {
+        row: R;
+        field: string;
+    }) => unknown;
+}
+export interface DataTableSort {
+    field: string;
+    sort: 'asc' | 'desc';
+}
+export interface DataTablePaginationModel {
+    /** Zero-based page index. */
+    page: number;
+    pageSize: number;
+}
+export interface DataTableProps<R = Record<string, unknown>> {
+    columns: DataTableColumn<R>[];
+    rows: R[];
+    /** Stable id for a row. Defaults to `row.id`. */
+    getRowId?: (row: R) => RowId;
+    /** Replace rows with skeleton placeholders. */
+    loading?: boolean;
+    /** Total server-side row count — enables the pagination footer. */
+    rowCount?: number;
+    paginationModel?: DataTablePaginationModel;
+    onPaginationModelChange?: (model: DataTablePaginationModel) => void;
+    /** Show a leading checkbox column. */
+    checkboxSelection?: boolean;
+    rowSelectionModel?: RowId[];
+    onRowSelectionModelChange?: (ids: RowId[]) => void;
+    /** Controlled sort. Header clicks emit `onSortModelChange` (server-driven). */
+    sortModel?: DataTableSort | null;
+    onSortModelChange?: (sort: DataTableSort | null) => void;
+    onRowClick?: (row: R) => void;
+    /** Empty-state content. */
+    noRowsLabel?: ReactNode;
+    /** Turn off column resizing for every column. */
+    disableColumnResize?: boolean;
+    className?: string;
+}
+export declare const DataTable: <R = Record<string, unknown>>(props: DataTableProps<R> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableColumn, DataTableSort, DataTablePaginationModel, DataTableAlign, RowId, } from './DataTable';

package/dist/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { FileRejection, UseFileDropOptions } from './useFileDrop';
+export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | 'onDropAccepted' | 'onDropRejected'> {
+    /** Fired with `(accepted, rejected)` after each drop or browse. */
+    onDrop?: (accepted: File[], rejected: FileRejection[]) => void;
+    /** Primary call-to-action line. */
+    label?: ReactNode;
+    /** Secondary hint under the label (e.g. accepted types / max size). */
+    hint?: ReactNode;
+    /** Replace the leading icon. */
+    icon?: ReactNode;
+    /** Custom body; overrides the default icon + text. */
+    children?: ReactNode;
+    /** Browse-button label. Set to `false` to hide the button. */
+    buttonLabel?: ReactNode | false;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare const FileUploader: import("react").ForwardRefExoticComponent<FileUploaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FileUploader/index.d.ts

@@ -0,0 +1,4 @@
+export { FileUploader } from './FileUploader';
+export type { FileUploaderProps } from './FileUploader';
+export { useFileDrop } from './useFileDrop';
+export type { UseFileDropOptions, FileRejection, FileError, FileRejectionCode, AcceptProp, } from './useFileDrop';