ingred-ui 33.11.1 → 33.12.1

package/dist/components/Chart/BarChart/types.d.ts

@@ -24,12 +24,18 @@ export type BarChartProps = {
     showLegend?: boolean;
     /** stacked 時に tooltip に合計を表示。デフォルト true */
     showTotalInTooltip?: boolean;
+    /** 凡例クリックで系列の表示/非表示を切り替え。デフォルト true */
+    interactiveLegend?: boolean;
     /**
      * 棒の太さ（カテゴリスロット幅に対する比率 0–1）。
      * - single / stacked: 棒 1 本（または積み上げ全体）の幅。デフォルト 0.6
      * - grouped: カテゴリ内グループ全体の幅（系列数で等分）。デフォルト 0.8
      */
     barWidthRatio?: number;
+    /** true の間、チャートの代わりにローディング表示 */
+    loading?: boolean;
+    /** 描画可能なデータがないときのメッセージ。未指定時は「データがありません」 */
+    emptyMessage?: string;
     "aria-label": string;
     height?: number;
     className?: string;

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

@@ -2,3 +2,7 @@ export { BarChart } from "./BarChart";
 export type { BarChartLayout, BarChartProps } from "./BarChart";
 export type { BarSegment, BarChartOrientation, ChartHoverState, ChartSeries, ResolvedChartSeries, } from "./types";
 export { computeYTicks, computeMaxStackedTotal } from "./internal/utils";
+export { hasChartData } from "./internal/hasChartData";
+export { formatDateAsMonthDay, mapTimeSeriesChartData, } from "./internal/mapTimeSeriesChartData";
+export type { TimeSeriesDataset, TimeSeriesPoint, } from "./internal/mapTimeSeriesChartData";
+export { CHART_DEFAULT_HEIGHT } from "./internal/getChartLayout";

package/dist/components/Chart/internal/ChartBar.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { BarChartOrientation, BarSegment } from "../types";
+type ChartBarProps = {
+    segment: BarSegment;
+    orientation: BarChartOrientation;
+    animation: "enter" | "exit" | "none";
+    enterIndex: number;
+    durationMs: number;
+    staggerMs: number;
+    onPointerMove: (event: React.PointerEvent<SVGRectElement>) => void;
+    onPointerLeave: () => void;
+};
+export declare const ChartBar: React.FC<ChartBarProps>;
+export {};

package/dist/components/Chart/internal/ChartLegend.d.ts

@@ -1,9 +1,13 @@
 import * as React from "react";
+export type ChartLegendItem = {
+    label: string;
+    color: string;
+    hidden: boolean;
+};
 type ChartLegendProps = {
-    items: {
-        label: string;
-        color: string;
-    }[];
+    items: ChartLegendItem[];
+    interactive?: boolean;
+    onToggle: (label: string) => void;
 };
 export declare const ChartLegend: React.FC<ChartLegendProps>;
 export {};

package/dist/components/Chart/internal/clampTooltipPosition.d.ts

@@ -0,0 +1,10 @@
+export type TooltipPosition = {
+    left: number;
+    top: number;
+    transform: string;
+};
+/**
+ * カーソル追従 tooltip を viewport 内に収める。
+ * 上方向に十分なスペースがなければ下方向に反転する。
+ */
+export declare function clampTooltipPosition(clientX: number, clientY: number, tooltipWidth: number, tooltipHeight: number, viewportWidth: number, viewportHeight: number, padding?: number, offset?: number): TooltipPosition;

package/dist/components/Chart/internal/filterVisibleSeries.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedChartSeries } from "../types";
+export declare function filterVisibleSeries(series: ResolvedChartSeries[], hiddenLabels: ReadonlySet<string>): ResolvedChartSeries[];
+export declare function toggleSeriesVisibility(hiddenLabels: ReadonlySet<string>, label: string, seriesLabels: readonly string[]): ReadonlySet<string>;
+/** exit アニメーション完了後に hidden 集合へ系列を追加する（既存の hidden を保持する） */
+export declare function commitHiddenSeriesLabel(hiddenLabels: ReadonlySet<string>, label: string): ReadonlySet<string>;

package/dist/components/Chart/internal/getChartDataKey.d.ts

@@ -0,0 +1,3 @@
+import { ChartSeries } from "../types";
+/** categories / series の構成が変わったとき凡例状態をリセットするためのキー */
+export declare function getChartDataKey(categories: readonly string[], series: readonly ChartSeries[]): string;

package/dist/components/Chart/internal/getChartLayout.d.ts

@@ -9,7 +9,6 @@ export type ChartLayoutOptions = {
     categoryCount: number;
     seriesCount?: number;
     height?: number;
-    legendHeight?: number;
     barWidthRatio?: number;
     layout?: BarChartLayout;
     orientation?: BarChartOrientation;
@@ -29,7 +28,6 @@ export type ChartLayout = {
     slotWidth: number;
     barWidth: number;
     groupWidth: number;
-    legendHeight: number;
     labelEvery: number;
     /** 横スクロールが発生する場合の最小幅 */
     minContentWidth: number;
@@ -40,4 +38,5 @@ export type ChartLayout = {
     /** コンテナ高さよりチャート高さが高い（縦スクロール対象） */
     overflowsVertically: boolean;
 };
+export declare const CHART_DEFAULT_HEIGHT = 320;
 export declare function getChartLayout(options: ChartLayoutOptions): ChartLayout;

package/dist/components/Chart/internal/hasChartData.d.ts

@@ -0,0 +1,3 @@
+import { ChartSeries } from "../types";
+/** categories / series に描画可能な値（null 以外かつ 0 より大）が存在するか */
+export declare function hasChartData(categories: readonly string[], series: readonly ChartSeries[]): boolean;

package/dist/components/Chart/internal/mapTimeSeriesChartData.d.ts

@@ -0,0 +1,26 @@
+import { ChartSeries } from "../types";
+export type TimeSeriesPoint = {
+    date: string;
+    value: number | null;
+};
+export type TimeSeriesDataset = {
+    label: string;
+    data: TimeSeriesPoint[];
+};
+/** YYYY/MM/DD 形式を MM/DD に変換。それ以外はそのまま返す */
+export declare function formatDateAsMonthDay(date: string): string;
+/**
+ * YYYY/M/D 形式（ゼロパディング有無を問わない）の日付文字列を時系列順に比較する。
+ * 単純な文字列比較だと "2026/9/1" > "2026/10/1" のように誤った順序になるため、
+ * 年/月/日を数値として比較する。YYYY/MM/DD 形式でない場合は文字列比較にフォールバックする。
+ */
+export declare function compareDateStrings(a: string, b: string): number;
+/**
+ * 日付付き系列データを BarChart の categories / series に変換する。
+ * 全 dataset の date を union し、欠損は null で埋める。
+ * date 文字列は dataset 間で同一表記であること（例: "2026/3/5" と "2026/03/05" は別カテゴリになる）。
+ */
+export declare function mapTimeSeriesChartData(datasets: readonly TimeSeriesDataset[], formatCategoryLabel?: (date: string) => string): {
+    categories: string[];
+    series: ChartSeries[];
+};

package/dist/components/Chart/internal/resolveSeries.d.ts

@@ -3,3 +3,5 @@ import { BarChartLayout } from "../BarChart/types";
 import { ChartSeries, ResolvedChartSeries } from "../types";
 export declare function resolveSeries(series: ChartSeries[], theme: Theme, colorScheme?: string): ResolvedChartSeries[];
 export declare function resolveLayout(seriesCount: number, layout: BarChartLayout | undefined): BarChartLayout;
+/** 凡例 reflow を使うか。表示系列数ではなく chart 全体の系列数と layout 意図で判定する */
+export declare function supportsChartLegendReflow(totalSeriesCount: number, layoutProp: BarChartLayout | undefined): boolean;

package/dist/components/Chart/internal/segmentReflow.d.ts

@@ -0,0 +1,11 @@
+import { BarChartOrientation, BarSegment } from "../types";
+export declare function segmentKey(segment: Pick<BarSegment, "categoryIndex" | "seriesLabel">): string;
+export declare function buildSegmentMap(segments: BarSegment[]): Map<string, BarSegment>;
+/** CSS keyframes と reflow で共通の ease-out カーブ */
+export declare const chartMotionEaseCss = "cubic-bezier(0.16, 1, 0.3, 1)";
+/** 終端の減速を長く取る ease-out（7乗） */
+export declare function easeOut(t: number): number;
+export declare function lerpValue(from: number, to: number, t: number): number;
+export declare function lerpSegment(from: BarSegment, to: BarSegment, t: number): BarSegment;
+export declare function collapsedSegment(target: BarSegment, orientation: BarChartOrientation): BarSegment;
+export declare function interpolateSegments(from: BarSegment[], to: BarSegment[], t: number, orientation: BarChartOrientation): BarSegment[];

package/dist/components/Chart/internal/styled.d.ts

@@ -15,11 +15,27 @@ export declare const ChartSvg: import("styled-components/dist/types").IStyledCom
     $minHeight: number;
 }, never>>> & string;
 export declare const ChartLegendContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ChartLegendItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ChartLegendSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+export declare const ChartLegendItemButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$hidden"> & {
+    $hidden: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$hidden"> & {
+    $hidden: boolean;
+}, never>>> & string;
+export declare const ChartLegendItemStatic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
+    $hidden: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
+    $hidden: boolean;
+}, never>>> & string;
+export declare const ChartLegendSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$hidden"> & {
     $color: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $hidden?: boolean | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$hidden"> & {
     $color: string;
+    $hidden?: boolean | undefined;
+}, never>>> & string;
+export declare const ChartPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
+    $minHeight: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
+    $minHeight: number;
 }, never>>> & string;
 export declare const ChartTooltipContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ChartTooltipTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/Chart/internal/useChartSegmentReflow.d.ts

@@ -0,0 +1,19 @@
+import { BarSegment, BarChartOrientation } from "../types";
+export type ReflowProgress = {
+    phaseIndex: number;
+    phaseCount: number;
+    progress: number;
+};
+/**
+ * 凡例トグル後の segment 位置を rAF で補間する。
+ * ChartBar の enter/exit CSS は prefers-reduced-motion 対応済みだが、
+ * reflow 自体は未対応。将来 matchMedia で duration 0 / 補間スキップを検討する。
+ */
+export declare function useChartSegmentReflow(durationMs: number, orientation: BarChartOrientation): {
+    reflowSegments: BarSegment[] | null;
+    reflowProgress: ReflowProgress | null;
+    startReflow: (from: BarSegment[], to: BarSegment[], onComplete?: () => void) => void;
+    cancelReflow: () => void;
+    isReflowing: boolean;
+};
+export declare function lerpAxisMaxValue(fromMaxValue: number, toMaxValue: number, reflowProgress: ReflowProgress | null): number;

package/dist/components/Chart/types.d.ts

@@ -1,5 +1,7 @@
 export type ChartSeries = {
+    /** 系列ごとに一意のラベル（凡例・表示切替のキー） */
     label: string;
+    /** null および 0 以下の値は棒として描画しない */
     data: (number | null)[];
 };
 export type BarChartLayout = "single" | "grouped" | "stacked";

package/dist/components/DataTable/internal/Table/Row.d.ts

@@ -1,11 +1,10 @@
 import * as React from "react";
 export type VerticalSpacing = "small" | "medium" | "large";
-type RowProps = {
-    highlighted: boolean;
-    verticalSpacing: VerticalSpacing;
-    isStickyHeader: boolean;
-    disableHoverHighlight: boolean;
+export type RowComponentProps = {
+    highlighted?: boolean;
+    verticalSpacing?: VerticalSpacing;
+    isStickyHeader?: boolean;
+    disableHoverHighlight?: boolean;
 };
-export type Props = React.ComponentPropsWithoutRef<"tr"> & Partial<RowProps>;
+export type Props = React.ComponentPropsWithoutRef<"tr"> & RowComponentProps;
 export declare const Row: React.FunctionComponent<Props>;
-export {};

package/dist/components/DataTable2/DataTable2.d.ts

@@ -68,6 +68,12 @@ type DataTable2Props = {
      * 例: `{ reorder: false }` で表示 ON/OFF のみ、`{ visibility: false }` で並び替えのみ。
      */
     columnEditFeatures?: DataTable2ColumnEditFeatures;
+    /**
+     * テーブル下部にも件数表示・ページネーションを表示する。
+     * 上部ツールバー右側と同じ UI を右下に複製する。
+     * @default false
+     */
+    showBottomPagination?: boolean;
 } & {
     /**
      * 見た目の制御。枠線で囲むか否か。枠線で囲むと角丸も適用される
@@ -80,5 +86,5 @@ type DataTable2Props = {
      */
     onCheckedRowsChange?: (checkedRows: string[]) => void;
 };
-export declare const DataTable2: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, enableRowSelection, columnEditFeatures: columnEditFeaturesProp, }: DataTable2Props) => React.JSX.Element;
+export declare const DataTable2: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, enableRowSelection, columnEditFeatures: columnEditFeaturesProp, showBottomPagination, }: DataTable2Props) => React.JSX.Element;
 export {};

package/dist/components/DataTable2/DataTable2Footer.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DataTable2Footer: () => React.JSX.Element;

package/dist/components/DataTable2/DataTable2Pagination.d.ts

@@ -1,2 +1,8 @@
 import React from "react";
-export declare const DataTable2Pagination: () => React.JSX.Element;
+type DataTable2PaginationLocation = "toolbar" | "footer";
+type DataTable2PaginationProps = {
+    /** 上下にページネーションが並ぶとき、スクリーンリーダー向けに位置を区別する */
+    location?: DataTable2PaginationLocation;
+};
+export declare const DataTable2Pagination: ({ location, }: DataTable2PaginationProps) => React.JSX.Element;
+export {};

package/dist/components/DataTable2/styled.d.ts

@@ -37,6 +37,11 @@ export declare const ToolbarPaginationOperator: import("styled-components/dist/t
 export declare const ToolbarPaginationTriggerIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const ToolbarFilterTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export declare const ToolbarExtras: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Footer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isSmallLayout"> & {
+    isSmallLayout: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "isSmallLayout"> & {
+    isSmallLayout: boolean;
+}, never>>> & string;
 export declare const DataTable2ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;