lucentia-ui 1.3.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/BarChart.js

@@ -18,6 +18,5 @@ export const BarChart = ({ data, keys, height = 300, barGap = 16 }) => {
         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/ChartTooltip.js

@@ -1,12 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useChart } from "./ChartContext";
 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 }) }));
+    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/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/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;

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

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { PopoverContext } from "./Popover";
+import styles from "./popover.module.css";
+import { useFloating, offset, flip, shift, autoUpdate, } from "@floating-ui/react";
+export const PopoverContent = ({ children }) => {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error("PopoverContent must be used within Popover");
+    }
+    const { open, setOpen, referenceRef } = context;
+    const [mounted, setMounted] = useState(false);
+    // SSR対策（Next.js）
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const { x, y, strategy, refs } = useFloating({
+        placement: "bottom-start",
+        middleware: [offset(8), flip(), shift()],
+        whileElementsMounted: autoUpdate,
+    });
+    // reference接続
+    useEffect(() => {
+        if (referenceRef.current) {
+            refs.setReference(referenceRef.current);
+        }
+    }, [referenceRef, refs]);
+    // outside click + Escape
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (refs.floating.current &&
+                !refs.floating.current.contains(target) &&
+                referenceRef.current &&
+                !referenceRef.current.contains(target)) {
+                setOpen(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        if (open) {
+            document.addEventListener("mousedown", handleClickOutside);
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [open, setOpen, refs, referenceRef]);
+    if (!open || !mounted)
+        return null;
+    return createPortal(_jsx("div", { ref: refs.setFloating, className: styles.content, style: {
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : 0,
+            left: x !== null && x !== void 0 ? x : 0,
+        }, children: children }), document.body);
+};

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

@@ -0,0 +1,2 @@
+import { PopoverTriggerProps } from "./types";
+export declare const PopoverTrigger: ({ children, asChild }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, useContext } from "react";
+import { PopoverContext } from "./Popover";
+export const PopoverTrigger = ({ children, asChild }) => {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error("PopoverTrigger must be used within Popover");
+    }
+    const { open, setOpen, referenceRef } = context;
+    const handleClick = () => {
+        setOpen(!open);
+    };
+    if (asChild) {
+        return cloneElement(children, {
+            ref: referenceRef,
+            onClick: handleClick,
+        });
+    }
+    return (_jsx("button", { ref: referenceRef, onClick: handleClick, children: children }));
+};

package/dist/components/Feedback/Popover/popover.module.css

@@ -0,0 +1,14 @@
+.root {
+    position: relative;
+    display: inline-block;
+}
+
+.content {
+    background: var(--color-surface);
+    backdrop-filter: var(--blur);
+    border-radius: var(--radius-md);
+
+    box-shadow: var(--shadow-lg);
+
+    z-index: 10;
+}

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

@@ -0,0 +1,19 @@
+import { ReactNode, ReactElement } from "react";
+export type PopoverProps = {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+};
+export type PopoverContextType = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    referenceRef: React.RefObject<HTMLElement | null>;
+};
+export type PopoverTriggerProps = {
+    children: ReactElement;
+    asChild?: boolean;
+};
+export type PopoverContentProps = {
+    children: ReactNode;
+};

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

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -13,6 +13,8 @@ export * from "./components/Typography";
 export * from "./components/Select";
 export * from "./components/Switch";
 export * from "./components/Feedback/Modal";
+export * from "./components/DatePicker";
+export * from "./components/Calendar";
 /* ===== Chart ===== */
 export * from "./components/Chart";
 /* ===== Extra ===== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "1.3.0",
+  "version": "1.4.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",