lucentia-ui 1.2.0 → 1.4.0

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,3 +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,3 +13,9 @@ 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 ===== */
+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.2.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",
@@ -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"
   }
-}
+}