@squadbase/vantage 0.0.1 → 0.1.1

package/dist/components/index.d.ts

@@ -0,0 +1,575 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { HTMLAttributes, ComponentType, ReactNode, ElementType, ComponentProps, SVGAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { EChartsOption } from 'echarts';
+export { EChartsOption } from 'echarts';
+import { ColumnDef, SortingState, OnChangeFn, ColumnFiltersState, PaginationState, RowSelectionState, VisibilityState, TableMeta, Table } from '@tanstack/react-table';
+export { ColumnDef, ColumnFiltersState, PaginationState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
+export { DateRange as RdpDateRange } from 'react-day-picker';
+
+interface PageShellProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellHeader: React.ForwardRefExoticComponent<PageShellHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellHeadingProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellHeading: React.ForwardRefExoticComponent<PageShellHeadingProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+}
+declare const PageShellTitle: React.ForwardRefExoticComponent<PageShellTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+interface PageShellDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+declare const PageShellDescription: React.ForwardRefExoticComponent<PageShellDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface PageShellHeaderEndProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellHeaderEnd: React.ForwardRefExoticComponent<PageShellHeaderEndProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellMetaProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellMeta: React.ForwardRefExoticComponent<PageShellMetaProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellActionsProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellActions: React.ForwardRefExoticComponent<PageShellActionsProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellSummaryProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellSummary: React.ForwardRefExoticComponent<PageShellSummaryProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Accent colours are spelled out one utility set per colour rather than built
+ * from a template string — Tailwind only emits classes it can see literally in
+ * the source.
+ */
+declare const pageShellSummaryCardVariants: (props?: ({
+    accent?: "accent" | "default" | "amber" | "blue" | "emerald" | "red" | "violet" | "orange" | "cyan" | "slate" | "green" | "teal" | "sky" | "indigo" | "purple" | "pink" | "rose" | "yellow" | "lime" | "gray" | "zinc" | "neutral" | "stone" | "fuchsia" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PageShellSummaryCardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof pageShellSummaryCardVariants> {
+}
+declare const PageShellSummaryCard: React.ForwardRefExoticComponent<PageShellSummaryCardProps & React.RefAttributes<HTMLDivElement>>;
+interface PageShellContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const PageShellContent: React.ForwardRefExoticComponent<PageShellContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Shared data shapes for the composite dashboard components. Kept in one place
+ * so filters, metrics and date pickers agree on the same vocabulary.
+ */
+
+interface FilterOption {
+    label: string;
+    value: string;
+    count?: number;
+    disabled?: boolean;
+}
+type FilterType = "select" | "multi-select" | "date-range" | "search";
+interface FilterConfig {
+    /** Unique key for this filter */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Filter input type */
+    type: FilterType;
+    /** Available options (for select/multi-select) */
+    options?: FilterOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Default value */
+    defaultValue?: string | string[];
+}
+type FilterValues = Record<string, string | string[] | undefined>;
+interface SegmentOption {
+    label: string;
+    value: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    disabled?: boolean;
+}
+interface DateRange {
+    from: Date | undefined;
+    to: Date | undefined;
+}
+interface PresetItem {
+    label: string;
+    getValue: () => DateRange;
+}
+type TrendDirection = "up" | "down" | "neutral";
+type MetricVariant = "default" | "primary" | "accent" | "muted";
+interface MetricItem {
+    /** Unique identifier for the metric */
+    id: string;
+    /** Display label for the metric */
+    label: string;
+    /** Current value (formatted string or number) */
+    value: string | number;
+    /** Optional unit suffix (e.g. "円", "%", "件") */
+    unit?: string;
+    /** Trend direction */
+    trend?: TrendDirection;
+    /** Trend change value */
+    trendValue?: number;
+    /** Optional description or subtitle */
+    description?: string;
+    /** Whether higher values are positive (default: true) */
+    positiveIsGood?: boolean;
+    /** Visual emphasis variant */
+    variant?: MetricVariant;
+}
+interface NavItem {
+    /** Display label */
+    label: string;
+    /** Route path or URL */
+    href: string;
+    /** Icon component (e.g. a `lucide-react` icon) */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Whether this item is currently active */
+    isActive?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Optional badge text (e.g. notification count) */
+    badge?: string;
+    /** Nested child items */
+    children?: NavItem[];
+}
+interface NavGroup {
+    /** Group label */
+    label?: string;
+    /** Items in this group */
+    items: NavItem[];
+}
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    description?: ReactNode;
+}
+interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+type SelectOptions = SelectOption[] | SelectOptionGroup[];
+declare function isGroupedOptions(options: SelectOptions): options is SelectOptionGroup[];
+declare function flattenOptions(options: SelectOptions): SelectOption[];
+
+interface AppShellSidebarProps {
+    variant?: "sidebar";
+    groups: NavGroup[];
+    actions?: ReactNode;
+    header?: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    linkComponent?: ElementType;
+    onNavigate?: (href: string) => void;
+}
+interface AppShellHeaderProps {
+    variant: "header";
+    groups: NavGroup[];
+    actions?: ReactNode;
+    header?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    linkComponent?: ElementType;
+    onNavigate?: (href: string) => void;
+}
+type AppShellProps = AppShellSidebarProps | AppShellHeaderProps;
+declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const headingStyles: {
+    readonly h1: "text-3xl font-bold tracking-tight";
+    readonly h2: "text-2xl font-semibold tracking-tight";
+    readonly h3: "text-xl font-semibold";
+    readonly h4: "text-lg font-semibold";
+};
+interface SectionHeaderProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    className?: string;
+    as?: keyof typeof headingStyles;
+}
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DashboardCardProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DashboardCard: React.ForwardRefExoticComponent<DashboardCardProps & React.RefAttributes<HTMLDivElement>>;
+interface DashboardCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DashboardCardHeader: React.ForwardRefExoticComponent<DashboardCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface DashboardCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+}
+declare const DashboardCardTitle: React.ForwardRefExoticComponent<DashboardCardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+interface DashboardCardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+declare const DashboardCardDescription: React.ForwardRefExoticComponent<DashboardCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface DashboardCardActionProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DashboardCardAction: React.ForwardRefExoticComponent<DashboardCardActionProps & React.RefAttributes<HTMLDivElement>>;
+interface DashboardCardContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DashboardCardContent: React.ForwardRefExoticComponent<DashboardCardContentProps & React.RefAttributes<HTMLDivElement>>;
+interface DashboardCardFooterProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const DashboardCardFooter: React.ForwardRefExoticComponent<DashboardCardFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface DashboardCardSkeletonProps {
+    className?: string;
+}
+declare function DashboardCardSkeleton({ className }: DashboardCardSkeletonProps): React.JSX.Element;
+interface DashboardCardPresetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+}
+declare function DashboardCardPreset({ title, description, actions, footer, children, headerClassName, contentClassName, footerClassName, className, ...props }: DashboardCardPresetProps): React.JSX.Element;
+
+interface EChartProps {
+    /**
+     * ECharts のオプション。
+     *
+     * 型推論を効かせるため、必ず `EChartsOption` を annotation するか
+     * `satisfies EChartsOption` を付けること。付けないと `type: "category"` などの
+     * literal が `string` に拡張され、ビルドが失敗する。
+     *
+     * @example
+     * import type { EChartsOption } from "@squadbase/vantage/components"
+     *
+     * const option: EChartsOption = {
+     *   xAxis: { type: "category", data: ["A", "B"] },
+     *   yAxis: { type: "value" },
+     *   series: [{ type: "bar", data: [1, 2] }],
+     * }
+     * <EChart option={option} />
+     */
+    option: EChartsOption;
+    /**
+     * チャートの高さ。数値は px、文字列は CSS 値(例: `"50vh"`)として扱う。
+     *
+     * 省略した場合は外側ラッパーに `h-[400px]` がデフォルトで当たるが、`className` に
+     * `h-full` や `h-[360px]` などの高さクラスを渡せばそちらが優先される
+     * (`h-full` を使う場合は親要素に確定した高さが必要)。
+     * `height` と `className` の高さを両方指定した場合は `height`(インライン style)が勝つ。
+     */
+    height?: string | number;
+    loading?: boolean;
+    /** `echarts.init` にそのまま渡すテーマ(名前または登録済みテーマオブジェクト)。 */
+    theme?: string | object;
+    onEvents?: Record<string, (params: unknown) => void>;
+    ariaLabel?: string;
+    className?: string;
+    /** true にするとチャート右上に PNG コピー / ダウンロードボタンを表示する */
+    actions?: boolean;
+    /** ダウンロード時のファイル名(拡張子含む)。省略時は "chart.png" */
+    fileName?: string;
+}
+declare const EChart: React.ForwardRefExoticComponent<EChartProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FunnelStep {
+    /** ステップのラベル(例: "ページビュー") */
+    label: string;
+    /** このステップの数値 */
+    value: number;
+    /** Tailwind bg カラークラス(例: "bg-chart-1")。未指定時は自動割り当て */
+    color?: string;
+    /** クリック時のハンドラ */
+    onClick?: () => void;
+}
+declare const funnelStepsVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FunnelStepsProps extends ComponentProps<"div">, VariantProps<typeof funnelStepsVariants> {
+    /** ファネルステップの配列(先頭が最大幅) */
+    data: FunnelStep[];
+    /** ステップ間のコンバージョン率を表示する */
+    showConversion?: boolean;
+    /** 値の表示フォーマット関数 */
+    formatValue?: (value: number) => string;
+    /** マウント時のエントリアニメーションを有効にする */
+    animate?: boolean;
+}
+declare const FunnelSteps: React.ForwardRefExoticComponent<Omit<FunnelStepsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type SparklineVariant = "line" | "bar";
+interface SparklineDataPoint {
+    value: number;
+    label?: string;
+}
+interface SparklineProps extends SVGAttributes<SVGSVGElement> {
+    data: SparklineDataPoint[];
+    variant?: SparklineVariant;
+    height?: number;
+    /** Tailwind text-colour class; drives both stroke and fill via `currentColor`. */
+    color?: string;
+    area?: boolean;
+    animate?: boolean;
+    className?: string;
+}
+declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+
+interface DataTableContextValue<TData> {
+    table: Table<TData>;
+    selectedRows: TData[];
+    hasSelection: boolean;
+    globalFilter: string;
+    setGlobalFilter: OnChangeFn<string>;
+    enableFiltering: boolean;
+    enablePagination: boolean;
+    enableRowSelection: boolean;
+    visibleColumnCount: number;
+}
+/**
+ * @template TData 行データ型
+ * @template TValue セル値の型 (省略時は任意)
+ */
+interface DataTableProps<TData, TValue> {
+    /**
+     * TanStack Table の列定義配列。
+     *
+     * `ColumnDef<TData, TValue>[]` を annotation するか配列リテラルに
+     * `satisfies ColumnDef<TData>[]` を付けないと、`accessorKey` などの
+     * literal が `string` に拡張され型エラーになる。
+     *
+     * @example
+     * import type { ColumnDef } from "@squadbase/vantage/components"
+     *
+     * const columns: ColumnDef<User>[] = [
+     *   { accessorKey: "id", header: "ID" },
+     *   { accessorKey: "name", header: "名前" },
+     * ]
+     * <DataTable columns={columns} data={users}>...</DataTable>
+     */
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    enableSorting?: boolean;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    enableFiltering?: boolean;
+    columnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    globalFilter?: string;
+    onGlobalFilterChange?: OnChangeFn<string>;
+    enablePagination?: boolean;
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    pageCount?: number;
+    enableRowSelection?: boolean;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    meta?: TableMeta<TData>;
+    className?: string;
+    /** Required — the parts to render (toolbar, content, pagination). */
+    children: ReactNode;
+}
+interface DataTableToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    showSearch?: boolean;
+    toolbar?: ReactNode;
+    bulkActions?: (selectedRows: unknown[]) => ReactNode;
+}
+interface DataTableContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+interface DataTablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    pageSizeOptions?: number[];
+}
+interface DataTableColumnVisibilityProps {
+    /** 列 ID をキーとしたラベルマップ。ヘッダーが文字列でない列のラベルを指定する */
+    columnLabels?: Record<string, string>;
+    className?: string;
+}
+/** The preset takes every `DataTable` prop except `children`, plus a few slots. */
+type DataTablePresetProps<TData, TValue> = Omit<DataTableProps<TData, TValue>, "children"> & {
+    enableColumnVisibility?: boolean;
+    columnLabels?: Record<string, string>;
+    /** Extension slots */
+    toolbar?: ReactNode;
+    bulkActions?: (selectedRows: TData[]) => ReactNode;
+};
+declare function useDataTable<TData>(): DataTableContextValue<TData>;
+declare function DataTable<TData, TValue>({ columns, data, enableSorting, sorting: sortingProp, onSortingChange, enableFiltering, columnFilters: columnFiltersProp, onColumnFiltersChange, globalFilter: globalFilterProp, onGlobalFilterChange, enablePagination, pagination: paginationProp, onPaginationChange, pageCount, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, meta, className, children, }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+declare const DataTableToolbar: React.ForwardRefExoticComponent<DataTableToolbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const DataTableContent: React.ForwardRefExoticComponent<DataTableContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DataTablePagination: React.ForwardRefExoticComponent<DataTablePaginationProps & React.RefAttributes<HTMLDivElement>>;
+declare const DataTableColumnVisibility: React.ForwardRefExoticComponent<DataTableColumnVisibilityProps & React.RefAttributes<HTMLButtonElement>>;
+/** The usual arrangement — toolbar, body and pagination — in one component. */
+declare function DataTablePreset<TData, TValue>({ enableColumnVisibility, columnLabels, toolbar, bulkActions, ...tableProps }: DataTablePresetProps<TData, TValue>): React.JSX.Element;
+declare namespace DataTablePreset {
+    var displayName: string;
+}
+
+interface FilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: FilterValues;
+    onChange: (values: FilterValues) => void;
+    onClear?: () => void;
+    className?: string;
+    children?: ReactNode;
+}
+declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+interface FilterBarSelectProps {
+    filterKey: string;
+    label: string;
+    options: FilterOption[];
+    placeholder?: string;
+    className?: string;
+}
+declare function FilterBarSelect({ filterKey, label, options, placeholder, className, }: FilterBarSelectProps): React.JSX.Element;
+declare namespace FilterBarSelect {
+    var displayName: string;
+}
+interface FilterBarMultiSelectProps {
+    filterKey: string;
+    label: string;
+    options: FilterOption[];
+    placeholder?: string;
+    className?: string;
+}
+declare function FilterBarMultiSelect({ filterKey, label, options, placeholder, className, }: FilterBarMultiSelectProps): React.JSX.Element;
+declare namespace FilterBarMultiSelect {
+    var displayName: string;
+}
+interface FilterBarActiveChipsProps {
+    /** Filter configs used to resolve option labels. Without them, raw values show. */
+    filters?: FilterConfig[];
+    className?: string;
+}
+declare function FilterBarActiveChips({ filters, className }: FilterBarActiveChipsProps): React.JSX.Element | null;
+declare namespace FilterBarActiveChips {
+    var displayName: string;
+}
+interface FilterBarClearButtonProps {
+    /** Override the button label. Defaults to "クリア". */
+    label?: string;
+    className?: string;
+}
+declare function FilterBarClearButton({ label, className }: FilterBarClearButtonProps): React.JSX.Element | null;
+declare namespace FilterBarClearButton {
+    var displayName: string;
+}
+interface FilterBarPresetProps {
+    filters: FilterConfig[];
+    value: FilterValues;
+    onChange: (values: FilterValues) => void;
+    onClear?: () => void;
+    className?: string;
+}
+/** The whole row built from a `FilterConfig[]`. */
+declare function FilterBarPreset({ filters, value, onChange, onClear, className, }: FilterBarPresetProps): React.JSX.Element;
+declare namespace FilterBarPreset {
+    var displayName: string;
+}
+
+declare const defaultPresets: PresetItem[];
+interface DateRangePickerProps {
+    /**
+     * 選択中の日付範囲。型は Vantage 独自の `DateRange`。
+     * react-day-picker の `DateRange` とは別物なので注意 — そちらが必要なら
+     * このファイルの末尾で re-export している `RdpDateRange` を使う。
+     *
+     * @example
+     * import type { DateRange } from "@squadbase/vantage/components"
+     *
+     * const [range, setRange] = useState<DateRange | undefined>()
+     * <DateRangePicker value={range} onChange={setRange} />
+     */
+    value?: DateRange;
+    onChange?: (range: DateRange) => void;
+    presets?: PresetItem[];
+    showPresets?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    align?: "start" | "center" | "end";
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const iconSizes: {
+    readonly sm: "size-3.5";
+    readonly default: "size-4";
+    readonly lg: "size-5";
+};
+interface SegmentedControlProps {
+    options: SegmentOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: keyof typeof iconSizes;
+    fullWidth?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SearchableSelectProps {
+    options: SelectOptions;
+    value?: string;
+    onChange?: (value: string | undefined) => void;
+    onSearch?: (query: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    className?: string;
+}
+declare const SearchableSelect: React.ForwardRefExoticComponent<SearchableSelectProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MultiSelectProps {
+    options: SelectOptions;
+    value: string[];
+    onChange?: (value: string[]) => void;
+    onSearch?: (query: string) => void;
+    maxCount?: number;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const metricValueVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface MetricValueProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricValueVariants> {
+}
+declare const MetricValue: React.ForwardRefExoticComponent<MetricValueProps & React.RefAttributes<HTMLDivElement>>;
+interface MetricUnitProps extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const MetricUnit: React.ForwardRefExoticComponent<MetricUnitProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface TrendIndicatorProps {
+    value: number;
+    direction: TrendDirection;
+    positiveIsGood?: boolean;
+    className?: string;
+}
+declare const TrendIndicator: React.ForwardRefExoticComponent<TrendIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface StatusBadgeProps {
+    status: string;
+    label?: string;
+    colorMap?: Partial<Record<string, string>>;
+    className?: string;
+}
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface PlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { AppShell, type AppShellHeaderProps, type AppShellProps, type AppShellSidebarProps, DashboardCard, DashboardCardAction, type DashboardCardActionProps, DashboardCardContent, type DashboardCardContentProps, DashboardCardDescription, type DashboardCardDescriptionProps, DashboardCardFooter, type DashboardCardFooterProps, DashboardCardHeader, type DashboardCardHeaderProps, DashboardCardPreset, type DashboardCardPresetProps, type DashboardCardProps, DashboardCardSkeleton, type DashboardCardSkeletonProps, DashboardCardTitle, type DashboardCardTitleProps, DataTable, DataTableColumnVisibility, type DataTableColumnVisibilityProps, DataTableContent, type DataTableContentProps, DataTablePagination, type DataTablePaginationProps, DataTablePreset, type DataTablePresetProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DateRange, DateRangePicker, type DateRangePickerProps, EChart, type EChartProps, FilterBar, FilterBarActiveChips, type FilterBarActiveChipsProps, FilterBarClearButton, type FilterBarClearButtonProps, FilterBarMultiSelect, type FilterBarMultiSelectProps, FilterBarPreset, type FilterBarPresetProps, type FilterBarProps, FilterBarSelect, type FilterBarSelectProps, type FilterConfig, type FilterOption, type FilterType, type FilterValues, type FunnelStep, FunnelSteps, type FunnelStepsProps, type MetricItem, MetricUnit, type MetricUnitProps, MetricValue, type MetricValueProps, type MetricVariant, MultiSelect, type MultiSelectProps, type NavGroup, type NavItem, PageShell, PageShellActions, type PageShellActionsProps, PageShellContent, type PageShellContentProps, PageShellDescription, type PageShellDescriptionProps, PageShellHeader, PageShellHeaderEnd, type PageShellHeaderEndProps, type PageShellHeaderProps, PageShellHeading, type PageShellHeadingProps, PageShellMeta, type PageShellMetaProps, type PageShellProps, PageShellSummary, PageShellSummaryCard, type PageShellSummaryCardProps, type PageShellSummaryProps, PageShellTitle, type PageShellTitleProps, Placeholder, type PlaceholderProps, type PresetItem, SearchableSelect, type SearchableSelectProps, SectionHeader, type SectionHeaderProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SelectOption, type SelectOptionGroup, type SelectOptions, Sparkline, type SparklineDataPoint, type SparklineProps, type SparklineVariant, StatusBadge, type StatusBadgeProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };