lucentia-ui 1.2.0 → 1.4.0

package/dist/components/Calendar/ArrowLeftIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+export declare const ArrowLeftIcon: React.FC<IconProps>;
+export default ArrowLeftIcon;

package/dist/components/Calendar/ArrowLeftIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArrowLeftIcon = ({ size = 24, color = "tranparent", className = "", }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.0303 16.9697C15.3232 17.2626 15.3232 17.7374 15.0303 18.0303C14.7374 18.3232 14.2626 18.3232 13.9697 18.0303L8.46972 12.5303C8.17683 12.2374 8.17683 11.7626 8.46972 11.4697L13.9697 5.96973C14.2626 5.67684 14.7374 5.67684 15.0303 5.96973C15.3232 6.26262 15.3232 6.73738 15.0303 7.03028L10.0605 12L15.0303 16.9697Z", fill: "currentColor" }) }) }));
+};
+export default ArrowLeftIcon;

package/dist/components/Calendar/ArrowRightIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+export declare const ArrowRightIcon: React.FC<IconProps>;
+export default ArrowRightIcon;

package/dist/components/Calendar/ArrowRightIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ArrowRightIcon = ({ size = 24, color = "tranparent", className = "", }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.96973 7.03027C8.67684 6.73738 8.67684 6.26261 8.96973 5.96972C9.26262 5.67683 9.73738 5.67683 10.0303 5.96972L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L10.0303 18.0303C9.73738 18.3232 9.26262 18.3232 8.96973 18.0303C8.67684 17.7374 8.67684 17.2626 8.96973 16.9697L13.9395 12L8.96973 7.03027Z", fill: "currentColor" }) }) }));
+};
+export default ArrowRightIcon;

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,6 @@
+import { CalendarProps } from "./types";
+interface ExtendedCalendarProps extends CalendarProps {
+    locale?: string;
+}
+export declare const Calendar: ({ value, onChange, variant, locale, }: ExtendedCalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowRightIcon } from "./ArrowRightIcon";
+import { ArrowLeftIcon } from "./ArrowLeftIcon";
+import { generateCalendar } from "../../utils/date/generateCalendar";
+import styles from "./Calendar.module.css";
+export const Calendar = ({ value, onChange, variant = "embedded", locale = "ja-JP", // デフォルト値を設定
+ }) => {
+    const [currentMonth, setCurrentMonth] = useState(value !== null && value !== void 0 ? value : new Date());
+    const days = generateCalendar(currentMonth);
+    // --- i18n Helpers ---
+    // 1. 年月の表示（例：2024年3月 / March 2024）
+    const formatTitle = (date) => {
+        return new Intl.DateTimeFormat(locale, {
+            year: "numeric",
+            month: "long",
+        }).format(date);
+    };
+    // 2. 曜日のリスト生成（例：日〜土 / Su〜Sa）
+    const getWeekDays = () => {
+        const baseDate = new Date(2021, 0, 3); // 日曜日から始まる任意の日付
+        return Array.from({ length: 7 }, (_, i) => {
+            const date = new Date(baseDate);
+            date.setDate(baseDate.getDate() + i);
+            return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+        });
+    };
+    // --- Logic ---
+    const isSameDay = (a, b) => a.toDateString() === b.toDateString();
+    const isToday = (date) => {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    };
+    const handleMonthChange = (offset) => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + offset, 1));
+    };
+    return (_jsxs("div", { className: `${styles.root} ${styles[variant]}`, children: [_jsxs("div", { className: styles.header, children: [_jsx("button", { onClick: () => handleMonthChange(-1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("span", { className: styles.title, children: formatTitle(currentMonth) }), _jsx("button", { onClick: () => handleMonthChange(1), children: _jsx(ArrowRightIcon, {}) })] }), _jsx("div", { className: styles.week, children: getWeekDays().map((d) => (_jsx("div", { className: styles.weekDay, children: d }, d))) }), _jsx("div", { className: styles.grid, children: days.map((day, i) => {
+                    const isSelected = value && isSameDay(day.date, value);
+                    const today = isToday(day.date);
+                    return (_jsx("button", { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(day.date), className: `
+                ${styles.cell}
+                ${!day.isCurrentMonth ? styles.outside : ""}
+                ${isSelected ? styles.selected : ""}
+                ${today ? styles.today : ""}
+              `, children: day.date.getDate() }, i));
+                }) })] }));
+};

package/dist/components/Calendar/Calendar.module.css

@@ -0,0 +1,75 @@
+.root {
+    font-size: var(--font-size-14);
+}
+
+/* ===== variant ===== */
+
+.embedded {
+    padding: var(--space-lg);
+}
+
+.standalone {
+    padding: var(--space-lg);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+}
+
+/* ===== layout ===== */
+
+.header {
+    color: var(--color-on-surface);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-lg);
+}
+
+.title {
+    font-size: var(--font-size-16);
+}
+
+.week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: var(--space-xs);
+}
+
+.weekDay {
+    text-align: center;
+    font-size: var(--font-size-14);
+    color: var(--color-on-surface-variant);
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+/* ===== cell ===== */
+
+.cell {
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    border-radius: var(--radius-max);
+    background: transparent;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+}
+
+.cell:not(.selected):hover {
+    background: var(--color-primary-container);
+}
+
+.outside {
+    color: var(--color-on-surface-variant);
+}
+
+.selected {
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+}
+
+.today {
+    border: 1px solid var(--color-border);
+}

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

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export type { CalendarProps, CalendarVariant } from "./types";

package/dist/components/Calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar";

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

@@ -0,0 +1,6 @@
+export type CalendarVariant = "embedded" | "standalone";
+export type CalendarProps = {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    variant?: CalendarVariant;
+};

package/dist/components/Calendar/types.js

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

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

@@ -0,0 +1,11 @@
+type Props = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+export declare const Bar: ({ x, y, width, height, fill, onMouseEnter, onMouseLeave, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/BarChart/Bar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Bar = ({ x, y, width, height, fill, onMouseEnter, onMouseLeave, }) => {
+    return (_jsx("rect", { x: x, y: y, width: width, height: height, fill: fill, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "lucentia-bar", rx: 2 }));
+};

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

@@ -0,0 +1,2 @@
+import { BarChartProps } from "./types";
+export declare const BarChart: ({ data, keys, height, barGap }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BarChart/BarChart.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChartContainer } from "../ChartContainer";
+import { ChartGrid } from "../ChartGrid";
+import { ChartTooltip } from "../ChartTooltip";
+import { ChartXAxis } from "../ChartXAxis";
+import { ChartYAxis } from "../ChartYAxis";
+import { getNiceTicks } from "../utils/getNiceTicks";
+import { BarSeries } from "./BarSeries";
+import { getMaxValue } from "./utils";
+export const BarChart = ({ data, keys, height = 300, barGap = 16 }) => {
+    const seriesKeys = keys !== null && keys !== void 0 ? keys : Object.keys(data[0]).filter((k) => k !== "label");
+    const max = getMaxValue(data, seriesKeys);
+    const labels = data.map((d) => d.label);
+    const ticks = getNiceTicks(max);
+    const [cursor, setCursor] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsx("div", { style: { width: "100%" }, children: _jsxs(ChartContainer, { height: height, onPointerMove: (x, y) => setCursor({ x, y }), children: [_jsx(ChartGrid, {}), _jsx(ChartXAxis, { labels: labels }), _jsx(ChartYAxis, { ticks: ticks, max: ticks[ticks.length - 1] }), _jsx(BarSeries, { data: data, keys: seriesKeys, max: max, gap: barGap, onHover: (label, key, value) => setTooltip({ label, key, value }), onLeave: () => setTooltip(null) }), tooltip && (_jsxs(ChartTooltip, { x: cursor.x + 8, y: cursor.y + 8, children: [_jsx("div", { children: tooltip.label }), _jsxs("strong", { children: [tooltip.key, ": ", tooltip.value] })] }))] }) }));
+};

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

@@ -0,0 +1,10 @@
+type Props = {
+    data: any[];
+    keys: string[];
+    max: number;
+    gap: number;
+    onHover?: (label: string, key: string, value: number) => void;
+    onLeave?: () => void;
+};
+export declare const BarSeries: ({ data, keys, max, gap, onHover, onLeave }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/BarChart/BarSeries.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChart } from "../ChartContext";
+import { Bar } from "./Bar";
+import { scaleValue } from "./utils";
+export const BarSeries = ({ data, keys, max, gap, onHover, onLeave }) => {
+    const { width, height, padding } = useChart();
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    // 1グループあたりの幅（端数を切り捨てることで、右端のはみ出しを防止）
+    const groupWidth = Math.floor(innerWidth / data.length);
+    const contentWidth = groupWidth - gap;
+    const barUnitWidth = contentWidth / keys.length;
+    const actualBarWidth = barUnitWidth * 0.8;
+    return (_jsx("g", { children: data.map((d, i) => {
+            // padding + (i * groupWidth) で確実に計算
+            const groupX = padding + i * groupWidth;
+            return keys.map((key, j) => {
+                var _a;
+                const value = Number((_a = d[key]) !== null && _a !== void 0 ? _a : 0);
+                const barHeight = scaleValue(value, max, innerHeight);
+                // X座標：グループ開始位置 + 棒のオフセット
+                const x = groupX + (gap / 2) + (j * barUnitWidth) + (barUnitWidth - actualBarWidth) / 2;
+                const y = height - padding - barHeight;
+                return (_jsx(Bar, { x: x, y: y, width: actualBarWidth, height: barHeight, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(d.label, key, value), onMouseLeave: onLeave, fill: `var(--chart-color-${j + 1})` }, `${i}-${key}`));
+            });
+        }) }));
+};

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

@@ -0,0 +1,10 @@
+export type BarChartDatum = {
+    label: string;
+    [key: string]: string | number;
+};
+export type BarChartProps = {
+    data: BarChartDatum[];
+    keys?: string[];
+    height?: number;
+    barGap?: number;
+};

package/dist/components/Chart/BarChart/types.js

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

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

@@ -0,0 +1,3 @@
+export declare const getMaxValue: (data: any[], keys: string[]) => number;
+export declare const scaleValue: (value: number, max: number, height: number) => number;
+export declare const getStackMax: (data: any[], keys: string[]) => number;

package/dist/components/Chart/BarChart/utils.js

@@ -0,0 +1,26 @@
+export const getMaxValue = (data, keys) => {
+    let max = 0;
+    data.forEach((d) => {
+        keys.forEach((k) => {
+            var _a;
+            const v = Number((_a = d[k]) !== null && _a !== void 0 ? _a : 0);
+            if (v > max)
+                max = v;
+        });
+    });
+    return max;
+};
+export const scaleValue = (value, max, height) => {
+    if (max === 0)
+        return 0;
+    return (value / max) * height;
+};
+export const getStackMax = (data, keys) => {
+    let max = 0;
+    data.forEach((d) => {
+        const sum = keys.reduce((acc, k) => { var _a; return acc + Number((_a = d[k]) !== null && _a !== void 0 ? _a : 0); }, 0);
+        if (sum > max)
+            max = sum;
+    });
+    return max;
+};

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

@@ -0,0 +1,6 @@
+type Props = {
+    xLabel?: string;
+    yLabel?: string;
+};
+export declare const ChartAxis: ({ xLabel, yLabel }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartAxis.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
+export const ChartAxis = ({ xLabel, yLabel }) => {
+    const { width, height, padding } = useChart();
+    return (_jsxs("g", { stroke: "var(--chart-axis)", children: [_jsx("line", { x1: padding, x2: width - padding, y1: height - padding, y2: height - padding }), _jsx("line", { x1: padding, x2: padding, y1: padding, y2: height - padding }), xLabel && (_jsx("text", { x: width / 2, y: height - 6, textAnchor: "middle", fill: "var(--chart-text)", fontSize: "12", children: xLabel })), yLabel && (_jsx("text", { transform: `translate(12 ${height / 2}) rotate(-90)`, textAnchor: "middle", fill: "var(--chart-text)", fontSize: "12", children: yLabel }))] }));
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    padding?: number;
+    className?: string;
+    onPointerMove?: (x: number, y: number) => void;
+};
+export declare const ChartContainer: ({ children, width, height, padding, className, onPointerMove, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartContainer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ChartContext } from "./ChartContext";
+import styles from "./ChartContainer.module.css";
+export const ChartContainer = ({ children, width = 600, height = 300, padding = 32, className, onPointerMove, }) => {
+    const svgRef = useRef(null);
+    const handleMove = (e) => {
+        if (!svgRef.current || !onPointerMove)
+            return;
+        const rect = svgRef.current.getBoundingClientRect();
+        const scaleX = width / rect.width;
+        const scaleY = height / rect.height;
+        const x = (e.clientX - rect.left) * scaleX;
+        const y = (e.clientY - rect.top) * scaleY;
+        onPointerMove(x, y);
+    };
+    return (_jsx(ChartContext.Provider, { value: {
+            width,
+            height,
+            padding,
+        }, children: _jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, width: "100%", height: "100%", className: [styles.container, className].filter(Boolean).join(" "), onPointerMove: handleMove, children: children }) }));
+};

package/dist/components/Chart/ChartContainer.module.css

@@ -0,0 +1,51 @@
+.container {
+  background-color: var(--color-surface);
+  padding: var(--space-lg);
+  border-radius: var(--radius-md);
+  overflow: visible;
+}
+
+:root {
+  --chart-color-1: #99cccc; /* 明るすぎないソフトブルー */
+  --chart-color-2: #66b2b2;
+  --chart-color-3: #4da6a6;
+  --chart-color-4: #339999;
+  --chart-color-5: #008b8b;
+  --chart-color-6: #007a7a; /* base: 以前より落ち着いたトーン */
+  --chart-color-7: #006666;
+  --chart-color-8: #005252;
+  --chart-color-9: #004545;
+  --chart-color-10: #003333; /* 締まりのある深い色 */
+  
+  --chart-grid: var(--color-border);
+  --chart-axis: var(--color-border);
+}
+
+
+html[data-theme="dark"] {
+--chart-color-1: #80d5d4; /* Base: ここをスタート地点にして視認性を確保 */
+  --chart-color-2: #6bc2c1;
+  --chart-color-3: #57afae; /* 1,2,3の間で明確な色の沈み込みを作成 */
+  --chart-color-4: #439d9c;
+  --chart-color-5: #308b8b;
+  --chart-color-6: #1c797a;
+  --chart-color-7: #09686a;
+  --chart-color-8: #005759;
+  --chart-color-9: #004749;
+  --chart-color-10: #00383a; /* 最終地点はかなり深く */
+}
+
+.lucentia-bar {
+  transform-origin: bottom;
+  animation: barGrow 0.5s ease;
+}
+
+@keyframes barGrow {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}

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

@@ -0,0 +1,7 @@
+export type ChartContextValue = {
+    width: number;
+    height: number;
+    padding: number;
+};
+export declare const ChartContext: import("react").Context<ChartContextValue | null>;
+export declare const useChart: () => ChartContextValue;

package/dist/components/Chart/ChartContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const ChartContext = createContext(null);
+export const useChart = () => {
+    const ctx = useContext(ChartContext);
+    if (!ctx) {
+        throw new Error("Chart components must be used inside ChartContainer");
+    }
+    return ctx;
+};

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

@@ -0,0 +1,6 @@
+type Props = {
+    rows?: number;
+    columns?: number;
+};
+export declare const ChartGrid: ({ rows, columns }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartGrid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
+export const ChartGrid = ({ rows = 4, columns = 4 }) => {
+    const { width, height, padding } = useChart();
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    const rowHeight = innerHeight / rows;
+    const colWidth = innerWidth / columns;
+    const lines = [];
+    for (let i = 0; i <= rows; i++) {
+        const y = padding + rowHeight * i;
+        lines.push(_jsx("line", { x1: padding, x2: width - padding, y1: y, y2: y, stroke: "var(--chart-grid)" }, `row-${i}`));
+    }
+    for (let i = 0; i <= columns; i++) {
+        const x = padding + colWidth * i;
+        lines.push(_jsx("line", { y1: padding, y2: height - padding, x1: x, x2: x, stroke: "var(--chart-grid)" }, `col-${i}`));
+    }
+    return _jsx("g", { children: lines });
+};

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

@@ -0,0 +1,9 @@
+type Item = {
+    label: string;
+    color: string;
+};
+type Props = {
+    items: Item[];
+};
+export declare const ChartLegend: ({ items }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartLegend.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ChartLegend = ({ items }) => {
+    return (_jsx("div", { style: {
+            display: "flex",
+            gap: "12px",
+            flexWrap: "wrap",
+            marginTop: "8px",
+        }, children: items.map((item) => (_jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: "12px",
+            }, children: [_jsx("span", { style: {
+                        width: 12,
+                        height: 12,
+                        background: item.color,
+                        display: "inline-block",
+                    } }), item.label] }, item.label))) }));
+};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type Props = {
+    x: number;
+    y: number;
+    children: ReactNode;
+};
+export declare const ChartTooltip: ({ x, y, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartTooltip.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
+export const ChartTooltip = ({ x, y, children }) => {
+    const { width, height } = useChart();
+    const tooltipWidth = 120;
+    const tooltipHeight = 64;
+    const offset = 10;
+    let tx = x + offset;
+    let ty = y - offset;
+    // 右はみ出し防止
+    if (tx + tooltipWidth > width) {
+        tx = x - tooltipWidth - offset;
+    }
+    // 下はみ出し防止
+    if (ty + tooltipHeight > height) {
+        ty = height - tooltipHeight;
+    }
+    // 上はみ出し防止
+    if (ty < 0) {
+        ty = offset;
+    }
+    return (_jsxs("foreignObject", { x: tx, y: ty, width: tooltipWidth, height: tooltipHeight, style: {
+            borderRadius: "var(--radius-sm)",
+            overflow: "visible",
+        }, children: [_jsxs("div", { style: {
+                    background: "var(--color-surface)",
+                    backdropFilter: "var(--blur)",
+                    border: "1px solid var(--color-border)",
+                    borderRadius: "var(--radius-sm)",
+                    padding: "var(--space-md)",
+                    fontSize: "var(--font-size-14)",
+                    color: "var(--color-on-surface)",
+                    whiteSpace: "nowrap",
+                }, children: [children, " "] }), " "] }));
+};

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

@@ -0,0 +1,5 @@
+type Props = {
+    labels: string[];
+};
+export declare const ChartXAxis: ({ labels }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartXAxis.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
+export const ChartXAxis = ({ labels }) => {
+    const { width, height, padding } = useChart();
+    // 描画可能領域の計算
+    const innerWidth = width - padding * 2;
+    // 1ラベルあたりの幅
+    const step = innerWidth / (labels.length > 1 ? labels.length - 1 : 1);
+    return (_jsx("g", { fill: "var(--color-on-surface)", children: labels.map((label, i) => {
+            const x = padding + (innerWidth / labels.length) * (i + 0.5);
+            const y = height - padding + 20;
+            return (_jsx("text", { x: x, y: y, textAnchor: "middle" // 水平方向の中央揃え
+                , dominantBaseline: "hanging" // テキストの上端をy座標に合わせる（より制御しやすくなります）
+                , fontSize: "var(--font-size-14)", children: label }, i));
+        }) }));
+};

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

@@ -0,0 +1,6 @@
+type Props = {
+    ticks: number[];
+    max: number;
+};
+export declare const ChartYAxis: ({ ticks, max }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/ChartYAxis.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
+export const ChartYAxis = ({ ticks, max }) => {
+    const { width, height, padding } = useChart();
+    const innerHeight = height - padding * 2;
+    return (_jsx("g", { fill: "var(--color-on-surface)", children: ticks.map((tick, i) => {
+            const ratio = tick / max;
+            const y = height - padding - ratio * innerHeight;
+            return (_jsxs("g", { children: [_jsx("text", { x: padding - 8, y: y, textAnchor: "end", dominantBaseline: "middle", fontSize: "var(--font-size-14)", children: tick }), _jsx("line", { x1: padding, x2: width - padding, y1: y, y2: y, stroke: "var(--chart-grid)", strokeDasharray: "2" })] }, i));
+        }) }));
+};

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

@@ -0,0 +1,2 @@
+import { LineChartProps } from "./types";
+export declare const LineChart: ({ data, keys, height }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/LineChart/LineChart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChartContainer } from "../ChartContainer";
+import { ChartGrid } from "../ChartGrid";
+import { ChartAxis } from "../ChartAxis";
+import { ChartXAxis } from "../ChartXAxis";
+import { ChartYAxis } from "../ChartYAxis";
+import { ChartTooltip } from "../ChartTooltip";
+import { LineSeries } from "./LineSeries";
+import { getMaxValue } from "../BarChart/utils";
+import { getNiceTicks } from "../utils/getNiceTicks";
+export const LineChart = ({ data, keys, height = 300 }) => {
+    const seriesKeys = keys !== null && keys !== void 0 ? keys : Object.keys(data[0]).filter((k) => k !== "label");
+    const max = getMaxValue(data, seriesKeys);
+    const ticks = getNiceTicks(max);
+    const labels = data.map((d) => d.label);
+    const [cursor, setCursor] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsx("div", { style: { width: "100%" }, children: _jsxs(ChartContainer, { height: height, onPointerMove: (x, y) => setCursor({ x, y }), children: [_jsx(ChartGrid, {}), _jsx(ChartAxis, {}), _jsx(ChartYAxis, { ticks: ticks, max: ticks[ticks.length - 1] }), _jsx(ChartXAxis, { labels: labels }), _jsx(LineSeries, { data: data, keys: seriesKeys, max: ticks[ticks.length - 1], onHover: (label, key, value) => setTooltip({
+                        label,
+                        key,
+                        value,
+                    }), onLeave: () => setTooltip(null) }), tooltip && (_jsxs(ChartTooltip, { x: cursor.x + 12, y: cursor.y + 12, children: [_jsx("div", { children: tooltip.label }), _jsxs("strong", { children: [tooltip.key, ": ", tooltip.value] })] }))] }) }));
+};

package/dist/components/Chart/LineChart/LinePath.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    color: string;
+};
+export declare const LinePath: ({ points, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};