lucentia-ui 1.1.0 → 1.3.0

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,23 @@
+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);
+    // BarChart.tsx の return 部分を修正
+    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,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChartTooltip = ({ x, y, children }) => {
+    return (_jsx("foreignObject", { x: x, y: y, width: 120, height: 64, style: { borderRadius: "var(--radius-sm)", overflow: "visible" }, children: _jsx("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)",
+            }, 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 {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LinePath = ({ points, color }) => {
+    const d = points
+        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+        .join(" ");
+    return _jsx("path", { d: d, fill: "none", stroke: color, strokeWidth: 3 });
+};

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

@@ -0,0 +1,9 @@
+type Props = {
+    cx: number;
+    cy: number;
+    color: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+export declare const LinePoint: ({ cx, cy, color, onMouseEnter, onMouseLeave, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LinePoint = ({ cx, cy, color, onMouseEnter, onMouseLeave, }) => {
+    return (_jsx("circle", { cx: cx, cy: cy, r: 5, fill: color, stroke: "var(--color-surface)", strokeWidth: 2, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
+};

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "../ChartContext";
+import { scaleValue } from "../BarChart/utils";
+import { LinePath } from "./LinePath";
+import { LinePoint } from "./LinePoint";
+export const LineSeries = ({ data, keys, max, onHover, onLeave }) => {
+    const { width, height, padding } = useChart();
+    const innerWidth = width - padding * 2;
+    const innerHeight = height - padding * 2;
+    // XAxisと同じ中央配置ロジック
+    const groupWidth = innerWidth / data.length;
+    return (_jsx("g", { children: keys.map((key, kIndex) => {
+            const points = data.map((d, i) => {
+                var _a;
+                const value = Number((_a = d[key]) !== null && _a !== void 0 ? _a : 0);
+                const x = padding + groupWidth * (i + 0.5);
+                const y = height -
+                    padding -
+                    scaleValue(value, max, innerHeight);
+                return { x, y, value, label: d.label };
+            });
+            return (_jsxs("g", { children: [_jsx(LinePath, { points: points, color: `var(--color-primary)` }), points.map((p, i) => (_jsx(LinePoint, { cx: p.x, cy: p.y, color: `var(--color-primary)`, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(p.label, key, p.value), onMouseLeave: onLeave }, i)))] }, key));
+        }) }));
+};

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

@@ -0,0 +1,9 @@
+export type LineChartDatum = {
+    label: string;
+    [key: string]: string | number;
+};
+export type LineChartProps = {
+    data: LineChartDatum[];
+    keys?: string[];
+    height?: number;
+};

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

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

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

@@ -0,0 +1,2 @@
+import { PieChartProps } from "./types";
+export declare const PieChart: ({ data, width, height, radius, innerRadius, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/PieChart/PieChart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChartContainer } from "../ChartContainer";
+import { ChartTooltip } from "../ChartTooltip";
+import { PieSeries } from "./PieSeries";
+export const PieChart = ({ data, width = 300, height = 300, radius, innerRadius = 0, }) => {
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsxs(ChartContainer, { width: width, height: height, children: [_jsx(PieSeries, { data: data, radius: radius, innerRadius: innerRadius, onHover: (label, value, x, y) => setTooltip({ label, value, x, y }), onLeave: () => setTooltip(null) }), tooltip && (_jsxs(ChartTooltip, { x: tooltip.x + 10, y: tooltip.y - 10, children: [_jsx("div", { children: tooltip.label }), _jsx("div", { style: { fontWeight: "var(--font-weight-bold)" }, children: tooltip.value })] }))] }));
+};

package/dist/components/Chart/PieChart/PieSeries.d.ts

@@ -0,0 +1,2 @@
+import { PieSeriesProps } from "./types";
+export declare const PieSeries: ({ data, radius, innerRadius, onHover, onLeave, }: PieSeriesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/PieChart/PieSeries.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useChart } from "../ChartContext";
+import { PieSlice } from "./PieSlice";
+import { describeArc } from "./utils";
+export const PieSeries = ({ data, radius, innerRadius = 0, onHover, onLeave, }) => {
+    const { width, height } = useChart();
+    const [hoverIndex, setHoverIndex] = useState(null);
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = radius !== null && radius !== void 0 ? radius : Math.min(width, height) / 2;
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    let startAngle = 0;
+    const getSVGPoint = (e) => {
+        var _a;
+        const svg = e.currentTarget.ownerSVGElement;
+        if (!svg)
+            return { x: 0, y: 0 };
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const cursorpt = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: cursorpt.x, y: cursorpt.y };
+    };
+    return (_jsx("g", { children: data.map((d, i) => {
+            const angle = (d.value / total) * 360;
+            const endAngle = startAngle + angle;
+            const path = describeArc(cx, cy, r, startAngle, endAngle, innerRadius);
+            startAngle = endAngle;
+            const scale = hoverIndex === i ? 1.04 : 1;
+            return (_jsx(PieSlice, { d: path, color: `var(--chart-color-${i + 1})`, cx: cx, cy: cy, scale: scale, onMouseMove: (e) => {
+                    setHoverIndex(i);
+                    const { x, y } = getSVGPoint(e);
+                    onHover === null || onHover === void 0 ? void 0 : onHover(d.label, d.value, x, y);
+                }, onMouseLeave: () => {
+                    setHoverIndex(null);
+                    onLeave === null || onLeave === void 0 ? void 0 : onLeave();
+                } }, i));
+        }) }));
+};

package/dist/components/Chart/PieChart/PieSlice.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from "react";
+type Props = {
+    d: string;
+    color: string;
+    cx: number;
+    cy: number;
+    scale?: number;
+    onMouseMove?: (e: MouseEvent<SVGPathElement>) => void;
+    onMouseLeave?: () => void;
+};
+export declare const PieSlice: ({ d, color, cx, cy, scale, onMouseMove, onMouseLeave, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chart/PieChart/PieSlice.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PieSlice = ({ d, color, cx, cy, scale = 1, onMouseMove, onMouseLeave, }) => {
+    return (_jsx("path", { d: d, fill: color, transform: `scale(${scale})`, style: {
+            cursor: "default",
+            transformOrigin: `${cx}px ${cy}px`,
+            transition: "transform 120ms ease",
+        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave }));
+};

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

@@ -0,0 +1,18 @@
+export type PieDatum = {
+    label: string;
+    value: number;
+};
+export type PieChartProps = {
+    data: PieDatum[];
+    width?: number;
+    height?: number;
+    radius?: number;
+    innerRadius?: number;
+};
+export type PieSeriesProps = {
+    data: PieDatum[];
+    radius?: number;
+    innerRadius?: number;
+    onHover?: (label: string, value: number, x: number, y: number) => void;
+    onLeave?: () => void;
+};

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

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

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

@@ -0,0 +1,5 @@
+export declare const polarToCartesian: (cx: number, cy: number, r: number, angle: number) => {
+    x: number;
+    y: number;
+};
+export declare const describeArc: (cx: number, cy: number, r: number, startAngle: number, endAngle: number, innerRadius?: number) => string;

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

@@ -0,0 +1,27 @@
+export const polarToCartesian = (cx, cy, r, angle) => {
+    const rad = (angle - 90) * (Math.PI / 180);
+    return {
+        x: cx + r * Math.cos(rad),
+        y: cy + r * Math.sin(rad),
+    };
+};
+export const describeArc = (cx, cy, r, startAngle, endAngle, innerRadius = 0) => {
+    const outerStart = polarToCartesian(cx, cy, r, endAngle);
+    const outerEnd = polarToCartesian(cx, cy, r, startAngle);
+    const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+    if (innerRadius === 0) {
+        return `       M ${outerStart.x} ${outerStart.y}
+      A ${r} ${r} 0 ${largeArcFlag} 0 ${outerEnd.x} ${outerEnd.y}
+      L ${cx} ${cy}
+      Z
+    `;
+    }
+    const innerStart = polarToCartesian(cx, cy, innerRadius, endAngle);
+    const innerEnd = polarToCartesian(cx, cy, innerRadius, startAngle);
+    return `     M ${outerStart.x} ${outerStart.y}
+    A ${r} ${r} 0 ${largeArcFlag} 0 ${outerEnd.x} ${outerEnd.y}
+    L ${innerEnd.x} ${innerEnd.y}
+    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${innerStart.x} ${innerStart.y}
+    Z
+  `;
+};

package/dist/components/Chart/RadarChart/RadarAxis.d.ts

@@ -0,0 +1,4 @@
+import { RadarDatum } from "./types";
+export declare const RadarAxis: ({ data, }: {
+    data: RadarDatum[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/RadarChart/RadarAxis.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "../ChartContext";
+import { polarToCartesian } from "./utils";
+export const RadarAxis = ({ data, }) => {
+    const { width, height } = useChart();
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.min(width, height) / 2 - 24;
+    const step = (Math.PI * 2) / data.length;
+    return (_jsx("g", { fontSize: 14, textAnchor: "middle", fill: "var(--color-on-surface)", children: data.map((d, i) => {
+            const angle = i * step - Math.PI / 2;
+            const lineEnd = polarToCartesian(cx, cy, radius, angle);
+            const labelPos = polarToCartesian(cx, cy, radius + 16, angle);
+            return (_jsxs("g", { children: [_jsx("line", { x1: cx, y1: cy, x2: lineEnd.x, y2: lineEnd.y, stroke: "var(--chart-grid)" }), _jsx("text", { x: labelPos.x, y: labelPos.y, children: d.label })] }, i));
+        }) }));
+};

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

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

package/dist/components/Chart/RadarChart/RadarChart.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChartContainer } from "../ChartContainer";
+import { ChartTooltip } from "../ChartTooltip";
+import { RadarGrid } from "./RadarGrid";
+import { RadarAxis } from "./RadarAxis";
+import { RadarSeries } from "./RadarSeries";
+export const RadarChart = ({ data, width = 320, height = 320, levels = 5, }) => {
+    const [tooltip, setTooltip] = useState(null);
+    return (_jsxs(ChartContainer, { width: width, height: height, children: [" ", _jsx(RadarGrid, { data: data, levels: levels }), _jsx(RadarAxis, { data: data }), _jsx(RadarSeries, { data: data, onHover: (label, value, x, y) => setTooltip({ label, value, x, y }), onLeave: () => setTooltip(null) }), tooltip && (_jsxs(ChartTooltip, { x: tooltip.x + 10, y: tooltip.y - 10, children: [_jsx("div", { children: tooltip.label }), _jsx("div", { children: tooltip.value })] }))] }));
+};

package/dist/components/Chart/RadarChart/RadarGrid.d.ts

@@ -0,0 +1,5 @@
+import { RadarDatum } from "./types";
+export declare const RadarGrid: ({ data, levels, }: {
+    data: RadarDatum[];
+    levels?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/RadarChart/RadarGrid.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChart } from "../ChartContext";
+import { polarToCartesian } from "./utils";
+export const RadarGrid = ({ data, levels = 5, }) => {
+    const { width, height } = useChart();
+    const axes = data.length;
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.min(width, height) / 2 - 24;
+    const step = (Math.PI * 2) / axes;
+    return (_jsx("g", { stroke: "var(--chart-grid)", fill: "none", children: [...Array(levels)].map((_, level) => {
+            const r = (radius / levels) * (level + 1);
+            const points = [...Array(axes)].map((_, i) => {
+                const angle = i * step - Math.PI / 2;
+                const p = polarToCartesian(cx, cy, r, angle);
+                return `${p.x},${p.y}`;
+            });
+            return (_jsx("polygon", { points: points.join(" ") }, level));
+        }) }));
+};

package/dist/components/Chart/RadarChart/RadarSeries.d.ts

@@ -0,0 +1,2 @@
+import { RadarSeriesProps } from "./types";
+export declare const RadarSeries: ({ data, onHover, onLeave, }: RadarSeriesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/RadarChart/RadarSeries.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "../ChartContext";
+import { createRadarPath, polarToCartesian, } from "./utils";
+export const RadarSeries = ({ data, onHover, onLeave, }) => {
+    const { width, height } = useChart();
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.min(width, height) / 2 - 24;
+    const values = data.map((d) => d.value);
+    const max = Math.max(...values);
+    const path = createRadarPath(cx, cy, radius, values, max);
+    const step = (Math.PI * 2) / data.length;
+    const getSVGPoint = (e) => {
+        var _a;
+        const svg = e.currentTarget.ownerSVGElement;
+        if (!svg)
+            return { x: 0, y: 0 };
+        const pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const cursorpt = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: cursorpt.x, y: cursorpt.y };
+    };
+    return (_jsxs("g", { children: [" ", _jsx("path", { d: path, fill: "var(--chart-color-1)", fillOpacity: 0.25, stroke: "var(--chart-color-1)", strokeWidth: 2 }), data.map((d, i) => {
+                const r = (d.value / max) * radius;
+                const angle = i * step - Math.PI / 2;
+                const p = polarToCartesian(cx, cy, r, angle);
+                return (_jsx("circle", { cx: p.x, cy: p.y, r: 12, fillOpacity: 0, style: { cursor: "default" }, onMouseMove: (e) => {
+                        const { x, y } = getSVGPoint(e);
+                        onHover === null || onHover === void 0 ? void 0 : onHover(d.label, d.value, x, y);
+                    }, onMouseLeave: onLeave }, i));
+            })] }));
+};

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

@@ -0,0 +1,22 @@
+export type RadarDatum = {
+    label: string;
+    value: number;
+};
+export type RadarChartProps = {
+    data: RadarDatum[];
+    width?: number;
+    height?: number;
+    levels?: number;
+};
+export type RadarSeriesProps = {
+    data: RadarDatum[];
+    onHover?: (label: string, value: number, x: number, y: number) => void;
+    onLeave?: () => void;
+};
+export type RadarGridProps = {
+    data: RadarDatum[];
+    levels?: number;
+};
+export type RadarAxisProps = {
+    data: RadarDatum[];
+};

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

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

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

@@ -0,0 +1,5 @@
+export declare const polarToCartesian: (cx: number, cy: number, r: number, angle: number) => {
+    x: number;
+    y: number;
+};
+export declare const createRadarPath: (cx: number, cy: number, radius: number, values: number[], max: number) => string;

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

@@ -0,0 +1,16 @@
+export const polarToCartesian = (cx, cy, r, angle) => {
+    return {
+        x: cx + r * Math.cos(angle),
+        y: cy + r * Math.sin(angle),
+    };
+};
+export const createRadarPath = (cx, cy, radius, values, max) => {
+    const step = (Math.PI * 2) / values.length;
+    const points = values.map((v, i) => {
+        const r = (v / max) * radius;
+        const angle = i * step - Math.PI / 2;
+        const p = polarToCartesian(cx, cy, r, angle);
+        return `${p.x} ${p.y}`;
+    });
+    return `M ${points.join(" L ")} Z`;
+};

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

@@ -0,0 +1,15 @@
+export { ChartContainer } from "./ChartContainer";
+export { ChartTooltip } from "./ChartTooltip";
+export { ChartLegend } from "./ChartLegend";
+export { ChartAxis } from "./ChartAxis";
+export { ChartXAxis } from "./ChartXAxis";
+export { ChartYAxis } from "./ChartYAxis";
+export { ChartGrid } from "./ChartGrid";
+export { BarChart } from "./BarChart/BarChart";
+export type { BarChartProps } from "./BarChart/types";
+export { LineChart } from "./LineChart/LineChart";
+export type { LineChartProps } from "./LineChart/types";
+export { PieChart } from "./PieChart/PieChart";
+export type { PieChartProps, PieDatum } from "./PieChart/types";
+export { RadarChart } from "./RadarChart/RadarChart";
+export type { RadarChartProps, RadarDatum } from "./RadarChart/types";

package/dist/components/Chart/index.js

@@ -0,0 +1,18 @@
+// =========================
+// Core
+// =========================
+export { ChartContainer } from "./ChartContainer";
+export { ChartTooltip } from "./ChartTooltip";
+export { ChartLegend } from "./ChartLegend";
+// Axis / Grid
+export { ChartAxis } from "./ChartAxis";
+export { ChartXAxis } from "./ChartXAxis";
+export { ChartYAxis } from "./ChartYAxis";
+export { ChartGrid } from "./ChartGrid";
+// =========================
+// Charts
+// =========================
+export { BarChart } from "./BarChart/BarChart";
+export { LineChart } from "./LineChart/LineChart";
+export { PieChart } from "./PieChart/PieChart";
+export { RadarChart } from "./RadarChart/RadarChart";

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

@@ -0,0 +1 @@
+export declare const getNiceTicks: (max: number, tickCount?: number) => number[];

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

@@ -0,0 +1,20 @@
+export const getNiceTicks = (max, tickCount = 5) => {
+    if (max === 0)
+        return [0];
+    const roughStep = max / (tickCount - 1);
+    const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+    const residual = roughStep / magnitude;
+    let niceStep = magnitude;
+    if (residual > 5)
+        niceStep = 10 * magnitude;
+    else if (residual > 2)
+        niceStep = 5 * magnitude;
+    else if (residual > 1)
+        niceStep = 2 * magnitude;
+    const niceMax = Math.ceil(max / niceStep) * niceStep;
+    const ticks = [];
+    for (let v = 0; v <= niceMax; v += niceStep) {
+        ticks.push(v);
+    }
+    return ticks;
+};

package/dist/components/Feedback/Modal/Modal.module.css

@@ -13,7 +13,7 @@
   background: var(--color-background);
   color: var(--color-on-surface);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-modal);
+  box-shadow: var(--shadow-overlay-lg);
   padding: var(--space-2xl);
   min-width: 320px;
 }

package/dist/index.d.ts

@@ -12,3 +12,5 @@ export * from "./components/Typography";
 export * from "./components/Select";
 export * from "./components/Switch";
 export * from "./components/Feedback/Modal";
+export * from "./components/Chart";
+export * from "./components/Extra/Clock";

package/dist/index.js

@@ -13,3 +13,7 @@ export * from "./components/Typography";
 export * from "./components/Select";
 export * from "./components/Switch";
 export * from "./components/Feedback/Modal";
+/* ===== Chart ===== */
+export * from "./components/Chart";
+/* ===== Extra ===== */
+export * from "./components/Extra/Clock";

package/dist/styles/tokens.css

@@ -13,6 +13,7 @@
 
   --line-tight: 1.2;
   --line-snug: 1.35;
+  --line-normal: 1.5;
   --line-comfort: 1.7;
 
   --font-weight-regular: 400;
@@ -63,8 +64,19 @@
   --color-surface-container: #e9efeebf;
 
   --color-border: #bbcccc;
-  --color-scrim: rgba(129, 129, 129, 0.25);
 
+  --chart-color-1: #99cccc;
+  --chart-color-2: #66b2b2;
+  --chart-color-3: #4da6a6;
+  --chart-color-4: #339999;
+  --chart-color-5: #008b8b;
+  --chart-color-6: #007a7a;
+  --chart-color-7: #006666;
+  --chart-color-8: #005252;
+  --chart-color-9: #004545;
+  --chart-color-10: #003333;
+
+  --color-scrim: rgba(129, 129, 129, 0.25);
   --color-shadow-l: rgba(255, 255, 255, 1);
   --color-shadow-d: rgba(0, 0, 0, 0.2);
 
@@ -91,7 +103,8 @@
     -4px -4px 16px 8px var(--color-shadow-l),
     4px 4px 16px 8px var(--color-shadow-d);
 
-  --shadow-modal: 0px 4px 16px 8px var(--color-shadow-d);
+  --shadow-overlay-md: 0px 2px 8px 2px var(--color-shadow-d);
+  --shadow-overlay-lg: 0px 4px 16px 8px var(--color-shadow-d);
 }
 
 html[data-theme="dark"] {
@@ -116,11 +129,22 @@ html[data-theme="dark"] {
   --color-surface: #1e2927bf;
   --color-on-surface: #c3cbca;
   --color-on-surface-variant: #dde4e380;
-  --color-surface-container: #262d2d;
+  --color-surface-container: #262d2dbf;
 
   --color-border: #889392;
-  --color-scrim: rgba(0, 0, 0, 0.25);
 
+  --chart-color-1: #80d5d4;
+  --chart-color-2: #6bc2c1;
+  --chart-color-3: #57afae;
+  --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;
+
+  --color-scrim: rgba(0, 0, 0, 0.25);
   --color-shadow-l: rgba(255, 255, 255, 0.25);
   --color-shadow-d: rgba(0, 0, 0, 1);
 }

package/dist/utils/date/generateCalendar.d.ts

@@ -0,0 +1,5 @@
+export type CalendarDay = {
+    date: Date;
+    isCurrentMonth: boolean;
+};
+export declare const generateCalendar: (baseDate: Date) => CalendarDay[];

package/dist/utils/date/generateCalendar.js

@@ -0,0 +1,36 @@
+export const generateCalendar = (baseDate) => {
+    const year = baseDate.getFullYear();
+    const month = baseDate.getMonth();
+    // 月初
+    const firstDayOfMonth = new Date(year, month, 1);
+    // 月初の曜日（0=日）
+    const startDay = firstDayOfMonth.getDay();
+    // 今月の日数
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    // 先月の日数
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+    const days = [];
+    // ① 前月
+    for (let i = startDay - 1; i >= 0; i--) {
+        days.push({
+            date: new Date(year, month - 1, daysInPrevMonth - i),
+            isCurrentMonth: false,
+        });
+    }
+    // ② 当月
+    for (let i = 1; i <= daysInMonth; i++) {
+        days.push({
+            date: new Date(year, month, i),
+            isCurrentMonth: true,
+        });
+    }
+    // ③ 次月
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+        days.push({
+            date: new Date(year, month + 1, i),
+            isCurrentMonth: false,
+        });
+    }
+    return days;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "homepage": "https://lucentia.rikiyamatsuda.com/en",
   "main": "dist/index.js",
@@ -23,7 +23,8 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json && npm run copy:assets",
@@ -32,9 +33,10 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/react": "^0.27.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "cpy-cli": "^6.0.0"
   }
-}
+}