lucentia-ui 0.2.23 → 1.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright  2026 Rikiya Matsuda
+Copyright (c) 2026 Rikiya Matsuda
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.ja.md

@@ -0,0 +1,121 @@
+
+# lucentia-ui
+
+ニューモーフィズムを基調としたReact UI デザイントークン&コンポーネント。ライト/ダークの2カラーテーマを保持。
+
+
+---
+
+## インストール方法
+
+```bash
+npm install lucentia-ui
+```
+
+yarnの場合
+
+```bash
+yarn add lucentia-ui
+```
+
+---
+
+## 対応環境
+
+- React 18+
+- CSS Modules 対応環境（Next.js / Vite / CRA など）
+
+## 基本の使い方
+
+### 1.グローバルスタイルを import（必須）
+
+※lucentia-uiを使用する場合、グローバルスタイルの import が必須です。
+※ Next.js の場合は `_app.tsx` や `layout.tsx` で import してください
+
+
+```tsx
+import "lucentia-ui/styles";
+```
+
+
+lucentia-ui のコンポーネントは
+CSS Variables（Design Tokens）を前提に設計されています。
+
+
+```css
+:root {
+  --color-background: #ffffff;
+  --color-text: #111111;
+}
+```
+
+ import "lucentia-ui/styles" によって：
+
+- Token 定義
+- ベーススタイル
+- 各コンポーネントの見た目
+が有効化されます。
+
+
+### 2.コンポーネントを使用
+
+```tsx
+import { Button, Checkbox, Radio } from "lucentia-ui";
+
+export default function Example() {
+  return (
+    <>
+      <Button variant="primary">Save</Button>
+      <Checkbox label="Accept terms" />
+      <Radio label="Option A" />
+    </>
+  );
+}
+```
+
+- 追加の CSS import は不要
+- デフォルトでは light テーマ が適用されます
+
+---
+
+
+### ダークテーマ
+
+lucentia-ui では、
+ダークテーマやテーマ切り替えを行う場合のみ ThemeProvider を使用します。
+
+
+#### テーマ設定例
+
+```tsx
+import { ThemeProvider } from "lucentia-ui";
+
+export default function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+## コンポーネント設計方針
+
+- **HTML ネイティブ要素を尊重**
+- **props extends HTMLAttributes**
+- **状態・色・サイズは Design Tokens に依存**
+- **Tailwind / inline style 不使用**
+
+---
+
+## リリースバージョン
+
+lucentia-ui はセマンティック バージョニングに従っています。
+破壊的変更はメジャーバージョンとしてリリースされます。
+
+
+
+
+## License
+
+MIT

package/README.md

@@ -1,9 +1,126 @@
+
 # lucentia-ui
 
-React UI design token and component system based on neumorphism, featuring two color themes: light and dark.
+A React UI design token and component library based on neumorphism, featuring both light and dark color themes.
+
+
+日本語版はこちら → README.ja.md
+
+
+---
+
+## Installation
+
+Using npm:
+
+```bash
+npm install lucentia-ui
+```
+
+Using yarn:
+
+```bash
+yarn add lucentia-ui
+```
+
+---
+
+## Requirements
+
+- React 18+
+- Environment that supports CSS Modules(Next.js / Vite / CRA, etc.)
+
+## Usage
+
+### Import global styles (required)
+
+Important: Importing global styles is required when using lucentia-ui.
+
+
+```tsx
+import "lucentia-ui/styles";
+```
+
+lucentia-ui components are designed around
+CSS Variables (Design Tokens).
+
+```css
+:root {
+  --color-background: #ffffff;
+  --color-text: #111111;
+}
+```
+
+By importing import "lucentia-ui/styles";
+
+- the following are enabled:
+- Design token definitions
+- Base styles
+
+Default component appearance
+
+> For Next.js, import this in app/layout.tsx or pages/_app.tsx.
+
+
+### 2.Use components
+
+```tsx
+import { Button, Checkbox, Radio } from "lucentia-ui";
+
+export default function Example() {
+  return (
+    <>
+      <Button variant="primary">Save</Button>
+      <Checkbox label="Accept terms" />
+      <Radio label="Option A" />
+    </>
+  );
+}
+```
+
+- No additional CSS imports are required
+- The light theme is applied by default
+
+
+---
+
+
+### ダークテーマ
+
+Use ThemeProvider only when enabling dark mode or theme switching.
+
+
+#### Theme example
+
+```tsx
+import { ThemeProvider } from "lucentia-ui";
+
+export default function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+## コンポーネント設計方針
+
+- **Respect native HTML elements**
+- **props extends HTMLAttributes**
+- **Props extend standard HTML attributes**
+- **No Tailwind CSS or inline styles**
 
 ---
 
-Not stable until version 1.00
+## Versioning
+
+lucentia-ui follows Semantic Versioning.
+Breaking changes are released as major versions.
+
+
+
+
+## License
 
----
+MIT

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-surface-lg);
+  box-shadow: var(--shadow-modal);
   padding: var(--space-2xl);
   min-width: 320px;
 }

package/dist/components/Input/Input.module.css

@@ -1,12 +1,11 @@
 .input {
   font-family: var(--font);
-  padding: var(--space-md) var(--space-lg);
   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;
 }
 
@@ -23,7 +22,7 @@
   cursor: text;
 }
 
-.input:read-only:not(:disabled) :focus {
+.input:read-only:not(:disabled):focus {
   border: 2px solid var(--color-surface);
 }
 

package/dist/components/Menu/Menu.module.css

@@ -4,7 +4,6 @@
     gap: var(--gap-sm);
     margin: 0;
     list-style: none;
-    padding: var(--space-lg) 0;
 }
 
 .item {

package/dist/components/Select/Select.d.ts

@@ -1,2 +1,2 @@
 import { SelectProps } from "./types";
-export declare const Select: ({ state, className, children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ options, value, placeholder, state, disabled, onChange, className, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -1,6 +1,116 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from "./Select.module.css";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import clsx from "clsx";
-export const Select = ({ state = "default", className, children, ...props }) => {
-    return (_jsx("select", { className: clsx(styles.select, styles[state], className), ...props, children: children }));
+import styles from "./Select.module.css";
+export const Select = ({ options, value, placeholder = "Select...", state = "default", disabled, onChange, className, }) => {
+    var _a;
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const wrapperRef = useRef(null);
+    const triggerRef = useRef(null);
+    const selectedIndex = options.findIndex((o) => o.value === value);
+    const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+    const optionRefs = useRef([]);
+    const resetActiveIndex = () => {
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : -1);
+    };
+    /* --------------------
+     * 外クリックで閉じる
+     * -------------------*/
+    useEffect(() => {
+        const onClick = (e) => {
+            var _a;
+            if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                setOpen(false);
+                resetActiveIndex();
+            }
+        };
+        document.addEventListener("mousedown", onClick);
+        return () => document.removeEventListener("mousedown", onClick);
+    }, [selectedIndex]);
+    /* --------------------
+     * キーボード操作
+     * -------------------*/
+    const onKeyDown = (e) => {
+        var _a, _b;
+        if (disabled)
+            return;
+        switch (e.key) {
+            case "ArrowDown": {
+                e.preventDefault();
+                setOpen(true);
+                setActiveIndex((i) => {
+                    if (i === -1) {
+                        return selectedIndex >= 0 ? selectedIndex : 0;
+                    }
+                    return i < options.length - 1 ? i + 1 : 0;
+                });
+                break;
+            }
+            case "ArrowUp": {
+                e.preventDefault();
+                setOpen(true);
+                setActiveIndex((i) => {
+                    if (i === -1) {
+                        return selectedIndex >= 0 ? selectedIndex : options.length - 1;
+                    }
+                    return i > 0 ? i - 1 : options.length - 1;
+                });
+                break;
+            }
+            case "Enter": {
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    resetActiveIndex();
+                    return;
+                }
+                if (activeIndex >= 0) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(options[activeIndex].value);
+                    setOpen(false);
+                    resetActiveIndex();
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+            }
+            case "Escape": {
+                setOpen(false);
+                resetActiveIndex();
+                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            }
+            case "Tab": {
+                setOpen(false);
+                resetActiveIndex();
+                break;
+            }
+        }
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        if (activeIndex < 0)
+            return;
+        const el = optionRefs.current[activeIndex];
+        el === null || el === void 0 ? void 0 : el.scrollIntoView({
+            block: "center",
+        });
+    }, [activeIndex, open]);
+    return (_jsxs("div", { ref: wrapperRef, className: clsx(styles.wrapper, styles[state], disabled && styles.disabled, className), children: [_jsxs("button", { ref: triggerRef, type: "button", className: styles.trigger, disabled: disabled, onKeyDown: onKeyDown, onClick: () => {
+                    setOpen((v) => {
+                        const next = !v;
+                        if (next)
+                            resetActiveIndex();
+                        return next;
+                    });
+                }, "aria-haspopup": "listbox", "aria-expanded": open, children: [_jsx("span", { className: clsx(!selected && styles.placeholder), children: (_a = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _a !== void 0 ? _a : placeholder }), _jsx("span", { className: clsx(styles.arrow, open && styles.open), 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: "M16.9697 8.96973C17.2626 8.67684 17.7374 8.67684 18.0303 8.96973C18.3232 9.26262 18.3232 9.73738 18.0303 10.0303L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.96973 10.0303C5.67684 9.73738 5.67684 9.26262 5.96973 8.96973C6.26262 8.67684 6.73738 8.67684 7.03028 8.96973L12 13.9395L16.9697 8.96973Z", fill: "currentColor" }) }) })] }), open && (_jsx("ul", { className: styles.dropdown, role: "listbox", children: options.map((option, index) => (_jsx("li", { ref: (el) => {
+                        optionRefs.current[index] = el;
+                    }, role: "option", "aria-selected": option.value === value, className: clsx(styles.option, index === activeIndex && styles.active, option.value === value && styles.selected), onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                        var _a;
+                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                        setOpen(false);
+                        resetActiveIndex();
+                        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, children: option.label }, option.value))) }))] }));
 };

package/dist/components/Select/Select.module.css

@@ -1,43 +1,107 @@
-.select {
-  font-family: var(--font);
+.wrapper {
+  position: relative;
+  display: inline-block;
+  width: auto;
+}
+
+.trigger {
+  /* all: unset; は避け、必要なものだけリセットする */
+  width: 100%;
+  appearance: none;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+  /* 以降、既存のスタイルを調整 */
+  display: flex; /* 中の要素を整列させやすくするため */
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  box-sizing: border-box;
   padding: var(--space-sm) var(--space-md);
   border: 2px solid transparent;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-md);
-
   background: var(--color-surface-container);
   color: var(--color-on-surface);
+}
 
-  appearance: none;
-  -webkit-appearance: none;
+.trigger:not(:disabled):hover {
+  border: 2px solid var(--color-border);
+  box-shadow:
+    0 0 4px var(--color-border),
+    0 0 8px var(--color-border);
+}
 
-  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.5%209.5L12%2015L18%209.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+.trigger:not(:disabled):active{
+  box-shadow: none;
+}
 
-  background-repeat: no-repeat;
-  background-position: right var(--space-sm) center;
-  background-size: 24px;
+.placeholder {
+  color: var(--color-on-surface);
+}
 
-  padding-right: calc(var(--space-md) + 32px + var(--space-sm));
+.arrow {
+  transition: transform 0.2s ease;
+  color: var(--color-on-surface);
+}
 
+.arrow.open {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  max-height: 300px;
+  margin-top: var(--space-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: var(--blur);
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.option {
+  padding: 8px 12px;
   cursor: pointer;
+  list-style: none;
 }
 
-select:has(option[value=""]:checked) {
-  color: var(--color-on-surface);
+.option:hover {
+  background: var(--color-surface-container);
 }
 
-/* focus */
-.select:focus {
-  outline: none;
+/* ★重要：キーボードで選択中の項目のスタイル */
+.option.active {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
+
+.selected {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
 }
 
-/* error */
-.error {
-  border: 2px solid var(--color-error);
+.dropdown:has(.option.active) .option.selected:not(.active) {
+  background: transparent;
+  color: var(--color-on-surface); /* 通常の文字色に戻す */
+}
+
+/* states */
+
+.error .trigger {
+  border-color: var(--color-error);
 }
 
-/* disabled */
-.select:disabled {
+.disabled .trigger:hover,
+.trigger:disabled:hover,
+.disabled, .disabled > .trigger {
   opacity: 0.5;
   cursor: not-allowed;
 }

package/dist/components/Select/Select.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
+export declare const Selected: Story;
 export declare const State: Story;

package/dist/components/Select/Select.stories.js

@@ -1,22 +1,51 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Select } from "./Select";
 const meta = {
     title: "Components/Select",
     component: Select,
 };
 export default meta;
+const OPTIONS = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+    { label: "Option C", value: "c" },
+];
+/* --------------------------------
+ * Default
+ * -------------------------------- */
 export const Default = {
-    args: {
-        children: (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] })),
+    render: () => {
+        const [value, setValue] = useState();
+        return (_jsx("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 32,
+                width: 240,
+            }, children: _jsx(Select, { options: OPTIONS, value: value, placeholder: "\u672A\u9078\u629E", onChange: setValue }) }));
+    },
+};
+/* --------------------------------
+ * With Selected Value
+ * -------------------------------- */
+export const Selected = {
+    render: () => {
+        const [value, setValue] = useState("b");
+        return _jsx(Select, { options: OPTIONS, value: value, onChange: setValue });
     },
 };
+/* --------------------------------
+ * States
+ * -------------------------------- */
 export const State = {
     render: () => {
+        const [value1, setValue1] = useState();
+        const [value2, setValue2] = useState();
         return (_jsxs("div", { style: {
                 display: "flex",
                 flexDirection: "column",
-                alignItems: "flex-start",
                 gap: 32,
-            }, children: [_jsxs(Select, { children: [_jsx("option", { value: "", children: "Default State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] }), _jsxs(Select, { state: "error", required: true, children: [_jsx("option", { value: "", disabled: true, selected: true, hidden: true, children: "Error State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] }), _jsxs(Select, { disabled: true, children: [_jsx("option", { value: "", children: "Disabled State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] })] }));
+                width: 240,
+            }, children: [_jsx(Select, { options: OPTIONS, value: value1, placeholder: "Default State", onChange: setValue1 }), _jsx(Select, { options: OPTIONS, value: value2, placeholder: "Error State", state: "error", onChange: setValue2 }), _jsx(Select, { options: OPTIONS, placeholder: "Disabled State", disabled: true })] }));
     },
 };

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

@@ -1,4 +1,14 @@
 export type SelectState = "default" | "error";
-export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    placeholder?: string;
     state?: SelectState;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    className?: string;
 }

package/dist/components/Textarea/Textarea.module.css

@@ -25,12 +25,12 @@
 }
 
 /* ===== Readonly ===== */
-.textarea:read-only {
+.textarea:read-only:not(:disabled)  {
   box-shadow: none;
   cursor: text;
 }
 
-.textarea:read-only:focus {
+.textarea:read-only:not(:disabled):focus {
   border: 2px solid var(--color-surface);
 }
 

package/dist/components/Typography/Heading.d.ts

@@ -1,7 +1,7 @@
 import type { TypographyVariant, TypographyColor } from "./types";
 import type React from "react";
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type HeadingVariant = Extract<TypographyVariant, "display-lg" | "display-md" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs">;
+type HeadingVariant = Extract<TypographyVariant, "display-lg" | "display-md" | "display-sm" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs">;
 type HeadingProps = {
     level: HeadingLevel;
     variant?: HeadingVariant;

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

@@ -3,5 +3,5 @@ export type AsProp<E extends React.ElementType> = {
     as?: E;
 };
 export type PolymorphicProps<E extends React.ElementType, P> = P & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, keyof P | "as">;
-export type TypographyVariant = "display-lg" | "display-md" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-md" | "body-sm" | "label-md" | "label-sm";
+export type TypographyVariant = "display-lg" | "display-md" | "display-sm" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-md" | "body-sm" | "label-md" | "label-sm";
 export type TypographyColor = "default" | "muted" | "primary" | "secondary" | "error" | "success";

package/dist/components/Typography/typography.module.css

@@ -9,6 +9,12 @@
 }
 
 .display-md {
+  font-size: var(--font-size-40);
+  line-height: var(--line-tight);
+  font-weight: var(--font-weight-bold);
+}
+
+.display-sm {
   font-size: var(--font-size-32);
   line-height: var(--line-tight);
   font-weight: var(--font-weight-bold);
@@ -27,25 +33,25 @@
 .heading-lg {
   font-size: var(--font-size-24);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
 }
 
 .heading-md {
   font-size: var(--font-size-20);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
 }
 
 .heading-sm {
   font-size: var(--font-size-18);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
 }
 
 .heading-xs {
   font-size: var(--font-size-16);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-bold);
 }
 
 /* ========================================
@@ -55,13 +61,13 @@
 .body-md {
   font-size: var(--font-size-16);
   line-height: var(--line-normal);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-medium);
 }
 
 .body-sm {
   font-size: var(--font-size-14);
   line-height: var(--line-normal);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-medium);
 }
 
 /* ========================================
@@ -71,13 +77,13 @@
 .label-md {
   font-size: var(--font-size-16);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
 }
 
 .label-sm {
   font-size: var(--font-size-14);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
 }
 
 /* ========================================
@@ -88,6 +94,10 @@
   color: var(--color-on-background);
 }
 
+.color-surface {
+  color: var(--color-on-surface);
+}
+
 .color-muted {
   color: var(--color-on-surface-variant);
 }

package/dist/styles/tokens.css

@@ -1,133 +1,126 @@
 :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-32: 32px;
-    --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;
-
-    /* ===== 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: #3a4444;
-    --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);
+  /* 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-32: 32px;
+  --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;
+
+  /* ===== Radius ===== */
+  --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;
+
+  /* ===== 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: #3a4444;
+  --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-modal: 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: #1E2927;
-    --color-on-background: #dde4e3;
-
-    --color-surface: #1E2927bf;
-    --color-on-surface: #c3cbca;
-    --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);
-}
+  --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: #1e2927;
+  --color-on-background: #dde4e3;
+
+  --color-surface: #1e2927bf;
+  --color-on-surface: #c3cbca;
+  --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,7 +1,8 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.23",
+  "version": "1.0.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",
   "types": "dist/index.d.ts",
   "exports": {