ingred-ui 33.10.0 → 33.11.0

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { BarChartProps } from "./types";
+declare const BarChart: React.FC<BarChartProps>;
+export default BarChart;

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

@@ -0,0 +1,3 @@
+export { default as BarChart } from "./BarChart";
+export type { BarChartLayout, BarChartProps } from "./types";
+export type { ChartSeries } from "../types";

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

@@ -0,0 +1,36 @@
+import { BarChartOrientation, ChartSeries } from "../types";
+export type BarChartLayout = "single" | "grouped" | "stacked";
+export type BarChartProps = {
+    /** X 軸のカテゴリラベル（horizontal 時は Y 軸） */
+    categories: string[];
+    /** 1 本以上のデータ系列 */
+    series: ChartSeries[];
+    /**
+     * - single: 系列 1 本（デフォルト）
+     * - grouped: 系列を横並びで比較
+     * - stacked: 系列を積み上げて構成比を比較
+     */
+    layout?: BarChartLayout;
+    /** vertical: 棒が上向き / horizontal: 棒が右向き。デフォルト vertical */
+    orientation?: BarChartOrientation;
+    /**
+     * theme.palette.chart.colorSchemes のキー。
+     * 未指定時は palette.chart.series（デフォルト）を使う。
+     */
+    colorScheme?: string;
+    /** 軸・tooltip の数値表示。未指定時は toLocaleString() */
+    valueFormatter?: (value: number) => string;
+    /** 系列が 2 本以上のとき凡例を表示。デフォルト true */
+    showLegend?: boolean;
+    /** stacked 時に tooltip に合計を表示。デフォルト true */
+    showTotalInTooltip?: boolean;
+    /**
+     * 棒の太さ（カテゴリスロット幅に対する比率 0–1）。
+     * - single / stacked: 棒 1 本（または積み上げ全体）の幅。デフォルト 0.6
+     * - grouped: カテゴリ内グループ全体の幅（系列数で等分）。デフォルト 0.8
+     */
+    barWidthRatio?: number;
+    "aria-label": string;
+    height?: number;
+    className?: string;
+};

package/dist/components/Chart/__tests__/chart.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+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";

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { BarChartOrientation } from "../types";
+type ChartValueAxisProps = {
+    orientation: BarChartOrientation;
+    width: number;
+    height: number;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    chartWidth: number;
+    chartHeight: number;
+    ticks: number[];
+    maxValue: number;
+    valueFormatter: (value: number) => string;
+};
+export declare const ChartValueAxis: React.FC<ChartValueAxisProps>;
+type ChartCategoryLabelsProps = {
+    orientation: BarChartOrientation;
+    labels: string[];
+    height: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingTop: number;
+    slotWidth: number;
+    labelEvery: number;
+};
+export declare const ChartCategoryLabels: React.FC<ChartCategoryLabelsProps>;
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+type ChartLegendProps = {
+    items: {
+        label: string;
+        color: string;
+    }[];
+};
+export declare const ChartLegend: React.FC<ChartLegendProps>;
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ResolvedChartSeries } from "../types";
+type ChartTooltipProps = {
+    label: string;
+    datasets: Pick<ResolvedChartSeries, "label" | "color" | "data">[];
+    categoryIndex: number;
+    clientX: number;
+    clientY: number;
+    valueFormatter: (value: number) => string;
+    showTotal?: boolean;
+};
+export declare const ChartTooltip: React.FC<ChartTooltipProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import { BarChartLayout } from "../BarChart/types";
+export declare const DEFAULT_BAR_WIDTH_RATIO = 0.6;
+export declare const DEFAULT_GROUP_WIDTH_RATIO = 0.8;
+export declare const MIN_BAR_WIDTH_RATIO = 0.1;
+export declare const MAX_BAR_WIDTH_RATIO = 1;
+export declare function resolveBarWidthRatio(layout: BarChartLayout, barWidthRatio?: number): number;

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

@@ -0,0 +1,5 @@
+import { BarChartLayout } from "../BarChart/types";
+import { BarChartOrientation, BarSegment, ResolvedChartSeries } from "../types";
+import { ChartLayout } from "./getChartLayout";
+export declare function computeChartMaxValue(series: ResolvedChartSeries[], layout: BarChartLayout): number;
+export declare function getBarSegments(series: ResolvedChartSeries[], layout: BarChartLayout, chartLayout: ChartLayout, maxValue: number, orientation?: BarChartOrientation): BarSegment[];

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

@@ -0,0 +1,43 @@
+import { BarChartLayout } from "../BarChart/types";
+import { BarChartOrientation } from "../types";
+export type ChartLayoutConfig = {
+    minSlotSize: number;
+    narrowContainerBreakpoint: number;
+    horizontalMinValueWidth: number;
+};
+export type ChartLayoutOptions = {
+    categoryCount: number;
+    seriesCount?: number;
+    height?: number;
+    legendHeight?: number;
+    barWidthRatio?: number;
+    layout?: BarChartLayout;
+    orientation?: BarChartOrientation;
+    layoutConfig?: ChartLayoutConfig;
+    /** ResizeObserver で測定したコンテナ幅 */
+    containerWidth?: number;
+};
+export type ChartLayout = {
+    width: number;
+    height: number;
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    chartWidth: number;
+    chartHeight: number;
+    slotWidth: number;
+    barWidth: number;
+    groupWidth: number;
+    legendHeight: number;
+    labelEvery: number;
+    /** 横スクロールが発生する場合の最小幅 */
+    minContentWidth: number;
+    /** 縦スクロールが発生する場合の最小高さ */
+    minContentHeight: number;
+    /** コンテナ幅よりチャート幅が広い（横スクロール対象） */
+    overflowsHorizontally: boolean;
+    /** コンテナ高さよりチャート高さが高い（縦スクロール対象） */
+    overflowsVertically: boolean;
+};
+export declare function getChartLayout(options: ChartLayoutOptions): ChartLayout;

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

@@ -0,0 +1,5 @@
+import { Theme } from "../../../themes/createTheme";
+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;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const ChartContainer: 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 ChartScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$overflowX" | "$overflowY"> & {
+    $overflowX: boolean;
+    $overflowY: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$overflowX" | "$overflowY"> & {
+    $overflowX: boolean;
+    $overflowY: boolean;
+}, never>>> & string;
+export declare const ChartSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, "$minWidth" | "$minHeight"> & {
+    $minWidth: number;
+    $minHeight: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, "$minWidth" | "$minHeight"> & {
+    $minWidth: number;
+    $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"> & {
+    $color: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $color: string;
+}, 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;
+export declare const ChartTooltipRow: 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 ChartTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $color: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $color: string;
+}, never>>> & string;
+export declare const ChartTooltipFooter: 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/useChartContainerWidth.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function useChartContainerWidth(): {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    containerWidth: number | undefined;
+};

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

@@ -0,0 +1 @@
+export { computeMaxStackedTotal, computeYTicks } from "./scale";

package/dist/components/Chart/internal/utils/scale.d.ts

@@ -0,0 +1,2 @@
+export declare function computeYTicks(maxValue: number, tickCount: number): number[];
+export declare function computeMaxStackedTotal(datasets: (number | null)[][]): number;

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

@@ -0,0 +1,27 @@
+export type ChartSeries = {
+    label: string;
+    data: (number | null)[];
+};
+export type BarChartLayout = "single" | "grouped" | "stacked";
+/** vertical: カテゴリが X 軸 / horizontal: カテゴリが Y 軸 */
+export type BarChartOrientation = "vertical" | "horizontal";
+export type ResolvedChartSeries = {
+    label: string;
+    color: string;
+    data: (number | null)[];
+};
+export type ChartHoverState = {
+    categoryIndex: number;
+    clientX: number;
+    clientY: number;
+} | null;
+export type BarSegment = {
+    seriesLabel: string;
+    color: string;
+    value: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    categoryIndex: number;
+};

package/dist/components/DateField/constants.d.ts

@@ -19,7 +19,7 @@ export declare const AllowedKeys: {
 };
 export declare const numpadCodes: string[];
 export declare const numberKeys: string[];
-export declare const allowedKeys: ("0" | "1" | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "ArrowDown" | "ArrowUp" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab")[];
+export declare const allowedKeys: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "ArrowDown" | "ArrowUp" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab")[];
 export declare const isNumpadKey: (code: string) => boolean;
 export declare const getNumpadNumber: (code: string) => string | null;
 export type AllowedKeys = (typeof AllowedKeys)[keyof typeof AllowedKeys];

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { Calendar, CalendarRange } from "./Calendar";
 export * from "./Calendar";
 export { default as Card } from "./Card";
 export * from "./Card";
+export * from "./Chart";
 export { default as Checkbox } from "./Checkbox";
 export * from "./Checkbox";
 export { default as CheckboxCard } from "./CheckboxCard";