lucentia-ui 1.2.0 → 1.4.0

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/DatePicker/CalendarIcon.d.ts

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

package/dist/components/DatePicker/CalendarIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarIcon = ({ 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: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M21 19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V9H21V19ZM5.5 16C5.22386 16 5 16.2239 5 16.5V17.5C5 17.7761 5.22386 18 5.5 18H6.5C6.77614 18 7 17.7761 7 17.5V16.5C7 16.2239 6.77614 16 6.5 16H5.5ZM9.5 16C9.22386 16 9 16.2239 9 16.5V17.5C9 17.7761 9.22386 18 9.5 18H10.5C10.7761 18 11 17.7761 11 17.5V16.5C11 16.2239 10.7761 16 10.5 16H9.5ZM13.5 16C13.2239 16 13 16.2239 13 16.5V17.5C13 17.7761 13.2239 18 13.5 18H14.5C14.7761 18 15 17.7761 15 17.5V16.5C15 16.2239 14.7761 16 14.5 16H13.5ZM17.5 16C17.2239 16 17 16.2239 17 16.5V17.5C17 17.7761 17.2239 18 17.5 18H18.5C18.7761 18 19 17.7761 19 17.5V16.5C19 16.2239 18.7761 16 18.5 16H17.5ZM5.5 12C5.22386 12 5 12.2239 5 12.5V13.5C5 13.7761 5.22386 14 5.5 14H6.5C6.77614 14 7 13.7761 7 13.5V12.5C7 12.2239 6.77614 12 6.5 12H5.5ZM9.5 12C9.22386 12 9 12.2239 9 12.5V13.5C9 13.7761 9.22386 14 9.5 14H10.5C10.7761 14 11 13.7761 11 13.5V12.5C11 12.2239 10.7761 12 10.5 12H9.5ZM13.5 12C13.2239 12 13 12.2239 13 12.5V13.5C13 13.7761 13.2239 14 13.5 14H14.5C14.7761 14 15 13.7761 15 13.5V12.5C15 12.2239 14.7761 12 14.5 12H13.5ZM17.5 12C17.2239 12 17 12.2239 17 12.5V13.5C17 13.7761 17.2239 14 17.5 14H18.5C18.7761 14 19 13.7761 19 13.5V12.5C19 12.2239 18.7761 12 18.5 12H17.5Z", fill: "currentColor" }), _jsx("path", { d: "M7.5 3C7.77614 3 8 3.22386 8 3.5V5H16V3.5C16 3.22386 16.2239 3 16.5 3H17.5C17.7761 3 18 3.22386 18 3.5V5H19C20.1046 5 21 5.89543 21 7V8H3V7C3 5.89543 3.89543 5 5 5H6V3.5C6 3.22386 6.22386 3 6.5 3H7.5Z", fill: "currentColor" })] }) }));
+};
+export default CalendarIcon;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerProps } from "./types";
+export declare const DatePicker: ({ value: valueProp, defaultValue, onChange, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover } from "../Feedback/Popover/Popover";
+import { PopoverTrigger } from "../Feedback/Popover/PopoverTrigger";
+import { PopoverContent } from "../Feedback/Popover/PopoverContent";
+import { Calendar } from "../Calendar/Calendar";
+import { CalendarIcon } from "./CalendarIcon";
+import styeles from "./DatePicker.module.css";
+export const DatePicker = ({ value: valueProp, defaultValue, onChange, placeholder = "YYYY/MM/DD", }) => {
+    // --- value制御 ---
+    const isControlled = valueProp !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const value = isControlled ? valueProp : internalValue;
+    const setValue = (date) => {
+        if (!isControlled) {
+            setInternalValue(date);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    };
+    // --- Popover制御（追加） ---
+    const [open, setOpen] = useState(false);
+    const formatDate = (date) => {
+        if (!date)
+            return "";
+        return date.toLocaleDateString();
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: styeles.inputWrapper, children: [_jsx("input", { readOnly: true, className: styeles.dateInput, value: formatDate(value), placeholder: placeholder }), _jsx(CalendarIcon, { className: styeles.calendarIcon })] }) }), _jsx(PopoverContent, { children: _jsx(Calendar, { value: value, onChange: (date) => {
+                        setValue(date);
+                        setOpen(false);
+                    } }) })] }));
+};

package/dist/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,52 @@
+
+.inputWrapper {
+  position: relative;
+  width: 100%; /* 必要に応じて調整 */
+}
+
+
+.calendarIcon{
+  color: var(--color-on-surface-variant);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 16px;
+  pointer-events: none;
+}
+
+.dateInput{
+  font-family: var(--font);
+  border-radius: var(--radius-sm);
+  border: 2px solid var(--color-background);
+  outline: none;
+  background: var(--color-surface-container);
+  color: var(--color-on-surface);
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  font-size: var(--font-size-16);
+  padding: var(--space-md) var(--space-lg);
+  box-shadow: var(--shadow-md-in);
+}
+
+
+
+/* ===== Focus ===== */
+.dateInput:focus {
+  outline: none;
+  border: 2px solid var(--color-primary);
+}
+
+/* ===== Error ===== */
+.error {
+  border: 2px solid var(--color-error);
+}
+
+/* ===== Disabled ===== */
+.dateInput:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker";
+export type { DatePickerProps } from "./types";

package/dist/components/DatePicker/index.js

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

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

@@ -0,0 +1,6 @@
+export type DatePickerProps = {
+    value?: Date | null;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+};

package/dist/components/DatePicker/types.js

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

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/components/Feedback/Popover/Popover.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps, PopoverContextType } from "./types";
+export declare const PopoverContext: import("react").Context<PopoverContextType | null>;
+export declare const Popover: ({ children, open: openProp, defaultOpen, onOpenChange, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Feedback/Popover/Popover.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useRef, useState } from "react";
+import styles from "./popover.module.css";
+export const PopoverContext = createContext(null);
+export const Popover = ({ children, open: openProp, defaultOpen = false, onOpenChange, }) => {
+    const isControlled = openProp !== undefined;
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const open = isControlled ? openProp : internalOpen;
+    const setOpen = (next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    const referenceRef = useRef(null);
+    return (_jsx(PopoverContext.Provider, { value: {
+            open,
+            setOpen,
+            referenceRef,
+        }, children: _jsx("div", { className: styles.root, children: children }) }));
+};

package/dist/components/Feedback/Popover/PopoverContent.d.ts

@@ -0,0 +1,2 @@
+import { PopoverContentProps } from "./types";
+export declare const PopoverContent: ({ children }: PopoverContentProps) => import("react").ReactPortal | null;