lucentia-ui 0.2.9 → 0.2.10

package/README.md

@@ -1,3 +1,9 @@
 # lucentia-ui
 
 React UI design token and component system based on neumorphism, featuring two color themes: light and dark.
+
+---
+
+Not stable until version 1.00
+
+---

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.d.ts

@@ -1,3 +1 @@
-import React from "react";
-import type { ThemeSwitchProps } from "./types";
-export declare const ThemeSwitch: React.FC<ThemeSwitchProps>;
+export declare function ThemeSwitch(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.js

@@ -1,17 +1,9 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../ThemeProvider";
 import styles from "./ThemeSwitch.module.css";
-import clsx from "clsx";
-export const ThemeSwitch = ({ checked, defaultChecked, onChange, onCheckedChange, disabled = false, id, name, className, }) => {
-    const handleChange = (e) => {
-        if (disabled)
-            return;
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
-    };
-    return (_jsxs("label", { className: clsx(styles.themeSwitch, className), style: {
-            opacity: disabled ? 0.6 : 1,
-            cursor: disabled ? "not-allowed" : "pointer",
-        }, children: [_jsx("input", { type: "checkbox", id: id, name: name, 
-                // CSS Modules側のクラス名と一致させる（styles.input もしくは styles.themeSwitchCheckbox）
-                className: styles.themeSwitchCheckbox, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange }), _jsx("span", { className: styles.slider, children: _jsxs("span", { className: styles.circle, children: [[...Array(8)].map((_, i) => (_jsx("span", { className: clsx(styles.shine, styles[`shine-${i + 1}`]) }, i))), _jsx("span", { className: styles.moon })] }) })] }));
-};
+export function ThemeSwitch() {
+    const { theme, toggleTheme } = useTheme();
+    const isDark = theme === "dark";
+    return (_jsxs("label", { className: styles.switch, children: [_jsx("input", { type: "checkbox", checked: isDark, onChange: toggleTheme, "aria-label": "Toggle theme" }), _jsx("span", { className: styles.slider, children: _jsxs("span", { className: styles.circle, children: [Array.from({ length: 8 }).map((_, i) => (_jsx("span", { className: `${styles.shine} ${styles[`shine${i + 1}`]}` }, i))), _jsx("span", { className: styles.moon })] }) })] }));
+}

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.module.css

@@ -1,99 +1,112 @@
-.themeSwitch {
-  font-size: 18px;
-  position: relative;
-  display: inline-block;
-  width: 72px;
-  height: 40px;
+/* The switch - the box around the slider */
+.switch {
+    font-size: 17px;
+    position: relative;
+    display: inline-block;
+    width: 4.8em;
+    height: 2.4em;
 }
 
-/* input単体にスタイルを当てる */
-.input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
 
+/* The slider */
 .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm-in);
-  transition: 0.4s;
-  border-radius: 30px;
-  overflow: hidden;
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: var(--color-surface-container);
+    box-shadow: var(--shadow-md-in);
+    transition: 0.4s;
+    border-radius: 30px;
+    overflow: hidden;
 }
 
 .circle {
-  position: absolute;
-  height: 1.1em;
-  width: 1.1em;
-  border-radius: 20px;
-  left: 0.6em;
-  bottom: 0.45em;
-  background-color: var(--color-primary);
-  transition: 0.4s;
+    position: absolute;
+    height: 1.2em;
+    width: 1.2em;
+    border-radius: 20px;
+    left: 1em;
+    bottom: 0.7em;
+    background-color: var(--color-primary);
+    transition: 0.4s;
 }
 
-/* ThemeSwitch.module.css */
+/* checked state */
+.switch input:checked+.slider .circle {
+    transform: translateX(1.5em);
+}
 
-/* inputのクラス名をTSXと合わせる */
-.themeSwitchCheckbox {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
+.switch input:checked+.slider .circle .shine {
+    transform: translate(0%, 0%);
 }
 
-/* チェック時の隣接セレクタを調整 */
-.themeSwitchCheckbox:checked + .slider .circle {
-  transform: rotate(0deg) translateX(1.5em) !important;
+.switch input:checked+.slider .circle .moon {
+    left: -10%;
+    opacity: 1;
+    transform: translateY(-60%);
 }
 
-.themeSwitchCheckbox:checked + .slider .circle .shine {
-  transform: translate(0%, 0%) !important;
+/* Moon */
+.moon {
+    position: absolute;
+    left: -100%;
+    top: 50%;
+    opacity: 0;
+    background-color: var(--color-surface-container);
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 99999px;
+    transform: translateY(-50%);
+    transition: all 0.4s;
 }
 
-.themeSwitchCheckbox:checked + .slider .circle .moon {
-  left: -10%;
-  opacity: 1;
-  transform: translateY(-60%);
+/* Shine */
+.shine {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.25rem;
+    height: 0.25rem;
+    background-color: var(--color-primary);
+    border-radius: 1rem;
+    transition: all 0.4s;
 }
 
-.moon {
-  position: absolute;
-  left: -100%;
-  top: 50%;
-  opacity: 0;
-  background: var(--color-background);
-  width: 1rem;
-  height: 1rem;
-  border-radius: 99999px;
-  transform: translateY(-50%);
-  transition: all 0.4s;
+/* Individual shine positions */
+.shine1 {
+    transform: translate(-50%, -375%);
 }
 
-.shine {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0.25rem;
-  height: 0.25rem;
-  background-color: var(--color-primary);
-  border-radius: 4rem;
-  transition: all 0.4s;
-}
-
-/* 個別のshine配置 */
-.shine-1 { transform: translate(-50%, -375%); }
-.shine-2 { transform: translate(175%, -275%); }
-.shine-3 { transform: translate(275%, -50%); }
-.shine-4 { transform: translate(175%, 175%); }
-.shine-5 { transform: translate(-50%, 275%); }
-.shine-6 { transform: translate(-275%, 175%); }
-.shine-7 { transform: translate(-375%, -50%); }
-.shine-8 { transform: translate(-275%, -275%); }
+.shine2 {
+    transform: translate(175%, -275%);
+}
+
+.shine3 {
+    transform: translate(275%, -50%);
+}
+
+.shine4 {
+    transform: translate(175%, 175%);
+}
+
+.shine5 {
+    transform: translate(-50%, 275%);
+}
+
+.shine6 {
+    transform: translate(-275%, 175%);
+}
+
+.shine7 {
+    transform: translate(-375%, -50%);
+}
+
+.shine8 {
+    transform: translate(-275%, -275%);
+}

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,8 @@
 import type { Theme } from "./types";
-type ThemeProviderProps = {
-    theme?: Theme;
+type Props = {
+    defaultTheme?: Theme;
+    persist?: boolean;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ theme, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ defaultTheme, persist, children, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,5 +1,26 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import styles from "./ThemeProvider.module.css";
-export function ThemeProvider({ theme = "light", children, }) {
-    return (_jsx("div", { className: `${styles.theme} ${theme === "dark" ? styles.dark : styles.light}`, children: children }));
+import { useEffect, useState, useCallback } from "react";
+import { ThemeContext } from "./context";
+export function ThemeProvider({ defaultTheme = "light", persist = false, children, }) {
+    const [theme, setTheme] = useState(defaultTheme);
+    // 初期化
+    useEffect(() => {
+        if (!persist)
+            return;
+        const stored = localStorage.getItem("theme");
+        if (stored)
+            setTheme(stored);
+    }, [persist]);
+    // html[data-theme] 反映 + 永続化
+    useEffect(() => {
+        document.documentElement.dataset.theme = theme;
+        if (persist) {
+            localStorage.setItem("theme", theme);
+        }
+    }, [theme, persist]);
+    const toggleTheme = useCallback(() => {
+        setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+    }, []);
+    return (_jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
 }

package/dist/components/ThemeProvider/context.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from "./types";
+export type ThemeContextValue = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;

package/dist/components/ThemeProvider/context.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const ThemeContext = createContext(null);

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

@@ -1,2 +1,3 @@
 export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./useTheme";
 export type { Theme } from "./types";

package/dist/components/ThemeProvider/index.js

@@ -1 +1,2 @@
 export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./useTheme";

package/dist/components/ThemeProvider/useTheme.d.ts

@@ -0,0 +1 @@
+export declare function useTheme(): import("./context").ThemeContextValue;

package/dist/components/ThemeProvider/useTheme.js

@@ -0,0 +1,10 @@
+"use client";
+import { useContext } from "react";
+import { ThemeContext } from "./context";
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within ThemeProvider");
+    }
+    return ctx;
+}

package/dist/components/ThemeProvider/useThemeStorage.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types";
+export declare function useThemeStorage(theme: Theme): void;

package/dist/components/ThemeProvider/useThemeStorage.js

@@ -0,0 +1,7 @@
+"use client";
+import { useEffect } from "react";
+export function useThemeStorage(theme) {
+    useEffect(() => {
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+}

package/dist/styles/base.css

@@ -2,11 +2,33 @@
    Reset / Base
    ------------------------------ */
 
+
+
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+    transition: none !important;
+}
+
+
+/* html / body 基本設定 */
+html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    min-height: 100%;
+    font-family: var(--font),
+        system-ui,
+        -apple-system,
+        sans-serif;
+    background: var(--color-background);
+}
+
+
 /* box-sizing を全要素に適用 */
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 /* マージン・パディングをリセット */
@@ -23,33 +45,23 @@ figure,
 blockquote,
 dl,
 dd {
-  margin: 0;
-  padding: 0;
-}
-
-/* html / body 基本設定 */
-html {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
+    margin: 0;
+    padding: 0;
 }
 
 
-main {
-  min-height: 100vh;
-}
-
 /* リスト */
 ul,
 ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
 /* リンク */
 a {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 /* 画像・メディア */
@@ -58,8 +70,8 @@ picture,
 video,
 canvas,
 svg {
-  display: block;
-  max-width: 100%;
+    display: block;
+    max-width: 100%;
 }
 
 /* フォーム要素 */
@@ -67,38 +79,38 @@ button,
 input,
 select,
 textarea {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: none;
-  outline: none;
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
 }
 
 /* button */
 button {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 /* textarea */
 textarea {
-  resize: vertical;
+    resize: vertical;
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: var(--color-on-surface-variant, #161D1D80);
-  opacity: 1;
+    color: var(--color-on-surface-variant, #161D1D80);
+    opacity: 1;
 }
 
 
 /* テーブル */
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 /* アクセシビリティ */
 :focus-visible {
-  outline: 2px solid var(--color-primary, #00a1a1);
-  outline-offset: 2px;
-}
+    outline: 2px solid var(--color-primary, #00a1a1);
+    outline-offset: 2px;
+}

package/dist/styles/font.css

@@ -1,23 +1,28 @@
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
 }
+
+
+:root{
+    --font: "Noto Sans JP", sans-serif;
+}

package/dist/styles/styles.css

@@ -0,0 +1,10 @@
+/* styles.css */
+
+/* 1. tokens  */
+@import "./tokens.css";
+
+/* 2. base */
+@import "./base.css";
+
+/* 3. font */
+@import "./font.css";

package/dist/styles/tokens.css

@@ -0,0 +1,133 @@
+:root {
+    /* font */
+    --font-size-12: 12px;
+    --font-size-14: 14px;
+    --font-size-16: 16px;
+    --font-size-18: 18px;
+    --font-size-20: 20px;
+    --font-size-24: 24px;
+    --font-size-28: 28px;
+    --font-size-40: 40px;
+    --font-size-48: 48px;
+
+    --line-tight: 1.2;
+    --line-snug: 1.35;
+    --line-normal: 1.6;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --font-weight-black: 700;
+
+    /* ===== Radius ===== */
+    --radius-xs: 4px;
+    --radius-sm: 8px;
+    --radius-md: 16px;
+    --radius-max: 999px;
+
+    /* ===== Space ===== */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 16px;
+    --space-xl: 24px;
+    --space-2xl: 32px;
+    --space-3xl: 48px;
+    --space-4xl: 64px;
+    --space-5xl: 96px;
+    --gap-sm: 16px;
+    --gap-md: 32px;
+    --gap-lg: 64px;
+
+    /* ===== Layout ===== */
+    --container: 1120px;
+
+    /* ===== Color ===== */
+    --color-primary: #00a1a1;
+    --color-on-primary: #ffffff;
+    --color-primary-container: #9cf1f0;
+    --color-on-primary-container: #004f4f;
+
+    --color-secondary: #7b9695;
+    --color-on-secondary: #ffffff;
+    --color-secondary-container: #cce8e7;
+    --color-on-secondary-container: #324b4b;
+
+    --color-error: #ff5449;
+    --color-on-error: #ffffff;
+    --color-error-container: #ffdad6;
+    --color-on-error-container: #93000a;
+
+    --color-background: #f4fbfa;
+    --color-on-background: #161d1d;
+
+    --color-surface: #f4fbfabf;
+    --color-on-surface: #161d1d;
+    --color-on-surface-variant: #161d1d80;
+    --color-surface-container: #e9efeebf;
+
+    --color-border: #bbcccc;
+    --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);
+
+    /* ===== Effect ===== */
+    --blur: blur(8px);
+
+    --shadow-sm:
+        -2px -2px 2px 1px var(--color-shadow-l),
+        2px 2px 2px 1px var(--color-shadow-d);
+
+    --shadow-sm-in:
+        inset -2px -2px 2px var(--color-shadow-l),
+        inset 2px 2px 2px var(--color-shadow-d);
+
+    --shadow-md:
+        -2px -2px 4px 2px var(--color-shadow-l),
+        2px 2px 4px 2px var(--color-shadow-d);
+
+    --shadow-md-in:
+        inset -4px -4px 4px var(--color-shadow-l),
+        inset 4px 4px 4px var(--color-shadow-d);
+
+    --shadow-lg:
+        -4px -4px 16px 8px var(--color-shadow-l),
+        4px 4px 16px 8px var(--color-shadow-d);
+
+    --shadow-surface-lg:
+        0px 4px 16px 8px var(--color-shadow-d);
+}
+
+
+
+html[data-theme="dark"] {
+    --color-primary: #80d5d4;
+    --color-on-primary: #003737;
+    --color-primary-container: #004f4f;
+    --color-on-primary-container: #9cf1f0;
+
+    --color-secondary: #b0cccb;
+    --color-on-secondary: #1b3534;
+    --color-secondary-container: #324b4b;
+    --color-on-secondary-container: #cce8e7;
+
+    --color-error: #ffb4ab;
+    --color-on-error: #690005;
+    --color-error-container: #93000a;
+    --color-on-error-container: #ffdad6;
+
+    --color-background: #2b3a38;
+    --color-on-background: #dde4e3;
+
+    --color-surface: #2b3a38bf;
+    --color-on-surface: #dde4e3;
+    --color-on-surface-variant: #dde4e380;
+    --color-surface-container: #262d2d;
+
+    --color-border: #889392;
+    --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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",