lucentia-ui 0.1.2 → 0.1.4

package/README.md

@@ -0,0 +1,152 @@
+# lucentia-ui
+
+Minimal React UI components with design tokens & theme support.
+
+---
+
+## Installation
+
+```bash
+npm install lucentia-ui
+```
+
+or
+
+```bash
+yarn add lucentia-ui
+```
+
+---
+
+## Requirements
+
+- React 18+
+- CSS Modules 対応環境（Next.js / Vite / CRA など）
+
+## 基本の使い方（必須）
+
+### 1.ThemeProvider をアプリのルートに配置
+
+※lucentia-ui は ThemeProvider が必須です
+
+```tsx
+import { ThemeProvider } from "lucentia-ui";
+
+export default function App() {
+  return <ThemeProvider theme="light">{/* your app */}</ThemeProvider>;
+}
+```
+
+### 利用可能なテーマ
+
+```ts
+type Theme = "light" | "dark";
+```
+
+```ts
+<ThemeProvider theme="dark">
+```
+
+### 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 は不要
+- ThemeProvider 配下であればスタイルは自動適用
+
+### なぜ ThemeProvider が必要なのか？
+
+lucentia-ui のコンポーネントは
+CSS Variables（Design Tokens） に依存しています。
+
+```css
+.theme.light {
+  --color-background: #ffffff;
+  --color-text: #111111;
+}
+```
+
+ThemeProvider は：
+
+- .theme.light / .theme.dark を付与
+- CSS Variables を有効化
+- コンポーネント CSS を安全に動作させる
+
+という役割を持ちます。
+
+### テーマ切り替え例
+
+```tsx
+import { useState } from "react";
+import { ThemeProvider, Button } from "lucentia-ui";
+
+export default function App() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+        Toggle theme
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## コンポーネント設計方針
+
+- **HTML ネイティブ要素を尊重**
+- **props extends HTMLAttributes**
+- **状態・色・サイズは Design Tokens に依存**
+- **Tailwind / inline style 不使用**
+
+---
+
+## 提供コンポーネント
+
+- Button
+- Checkbox
+- Radio
+- Input
+- Select
+- Switch
+- Modal
+
+詳細は **Storybook** を参照してください。
+
+---
+
+## 注意事項
+
+- **ThemeProvider を使わない場合**  
+  → CSS Variables が未定義になり表示が崩れます
+
+- **CSS の上書きは非推奨**  
+  （Tokens 拡張を想定）
+
+---
+
+## 将来予定
+
+- system theme 対応
+- Theme 拡張 API
+- アニメーション Token
+- a11y 強化
+
+---
+
+## License
+
+MIT

package/dist/components/Button/Button.module.css

@@ -1,10 +1,10 @@
 .button {
   font-family: var(--font);
   font-weight: 500;
-  border: none;
+  border: 2px solid transparent;
   cursor: pointer;
 
-  border-radius: var(--radius-max);
+  border-radius: var(--radius-sm);
 
   box-shadow: var(--shadow-sm);
   transition: box-shadow 0.2s ease, opacity 0.2s ease, background 0.25s ease-in-out,
@@ -17,23 +17,39 @@
   color: var(--color-on-surface);
 }
 
+
+
 .primary {
   background: var(--color-primary-container);
   color: var(--color-on-primary-container);
 }
 
+.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow: 0 0 4px var(--color-on-primary), 0 0 4px var(--color-primary), 0 0 8px var(--color-primary);
+}
 
 .secondary {
   background: var(--color-secondary-container);
   color: var(--color-on-secondary-container);
 }
 
+.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow: 0 0 4px var(--color-on-secondary), 0 0 4px var(--color-secondary), 0 0 8px var(--color-secondary);
+}
+
 
 .error {
   background: var(--color-error-container);
   color: var(--color-on-error-container);
 }
 
+.error:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow: 0 0 4px var(--color-on-error), 0 0 4px var(--color-error), 0 0 8px var(--color-error);
+}
+
 
 /* ===== Size ===== */
 
@@ -49,6 +65,8 @@
 
 /* ===== State ===== */
 
+
+
 .button:active:not(:disabled),
 .button[data-state="pressed"] {
   box-shadow: none;

package/dist/components/Button/Button.stories.js

@@ -31,11 +31,11 @@ const meta = {
 export default meta;
 export const Default = {};
 export const State = {
-    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "default", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "default", disabled: true, children: "Disabled" })] })),
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 32 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "default", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "default", disabled: true, children: "Disabled" })] })),
 };
 export const Variants = {
-    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "error", children: "Error" })] })),
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 32 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "error", children: "Error" })] })),
 };
 export const Sizes = {
-    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" })] })),
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 32 }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" })] })),
 };

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

@@ -4,7 +4,7 @@
   border-radius: var(--radius-sm);
   border: 2px solid var(--color-surface);
   outline: none;
-  box-shadow: var(--shadow-sm-in), var(--shadow-sm);
+  box-shadow: var(--shadow-sm-in);
 
   background: var(--color-surface-container);
   color: var(--color-on-surface);
@@ -12,21 +12,19 @@
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-/* ===== Focus ===== */
 
+/* ===== Focus ===== */
 .input:focus {
   outline: none;
   border: 2px solid var(--color-primary);
 }
 
 /* ===== Error ===== */
-
 .error {
   border: 2px solid var(--color-error);
 }
 
 /* ===== Disabled ===== */
-
 .input:disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/dist/components/Input/Input.stories.js

@@ -12,6 +12,6 @@ export const Default = {
 };
 export const State = {
     render: () => {
-        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Input, { placeholder: "Default State", state: "default" }), _jsx(Input, { placeholder: "Error State", state: "error" }), _jsx(Input, { placeholder: "Disabled State", disabled: true })] }));
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 32 }, children: [_jsx(Input, { placeholder: "Default State", state: "default" }), _jsx(Input, { placeholder: "Error State", state: "error" }), _jsx(Input, { placeholder: "Disabled State", disabled: true })] }));
     },
 };

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

@@ -1,10 +1,11 @@
 .select {
   font-family: var(--font);
   padding: var(--space-sm) var(--space-md);
+  border: 2px solid transparent;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-sm);
 
-  background-color: var(--color-surface-container);
+  background: var(--color-surface-container);
   color: var(--color-on-surface);
 
   appearance: none;
@@ -22,6 +23,8 @@
   cursor: pointer;
 }
 
+
+
 select:has(option[value=""]:checked) {
   color: var(--color-on-surface);
 }

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

@@ -1,13 +1,7 @@
 import type { Theme } from "./types";
-/**
- * ThemeProvider
- *
- * - DOM を描画しない（ラッパー要素なし）
- * - html 要素に theme class を直接付与する
- * - CSS 変数の定義は styles/theme.css に集約する
- */
-interface ThemeProviderProps {
+type ThemeProviderProps = {
     theme?: Theme;
-}
-export declare function ThemeProvider({ theme }: ThemeProviderProps): null;
+    children: React.ReactNode;
+};
+export declare function ThemeProvider({ theme, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,11 +1,5 @@
-"use client";
-import { useEffect } from "react";
-export function ThemeProvider({ theme = "light" }) {
-    useEffect(() => {
-        const root = document.documentElement;
-        // 初期化
-        root.classList.remove("light", "dark");
-        root.classList.add("theme", theme);
-    }, [theme]);
-    return null;
+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 }));
 }

package/dist/components/ThemeProvider/ThemeProvider.module.css

@@ -0,0 +1,142 @@
+.theme {
+  min-height: 100%;
+}
+
+
+.light {
+  /* font */
+  --font: "Noto Sans JP", sans-serif;
+
+  /* ===== 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-surface-container: #e9efeebf;
+
+  --color-border: #6f7979;
+  --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 4px 2px var(--color-shadow-l),
+               2px  2px 4px 2px var(--color-shadow-d);
+
+  --shadow-sm-in: inset -4px -4px 4px var(--color-shadow-l),
+                  inset  4px  4px 4px var(--color-shadow-d);
+
+  --shadow-md: -4px -4px 16px 8px var(--color-shadow-l),
+               4px  4px 16px 8px var(--color-shadow-d);
+
+
+
+  /* ===== 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: 32px;
+
+  /* ===== Layout ===== */
+  --container: 1120px;
+}
+
+
+.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: #1a2120bf;
+ --color-on-surface: #dde4e3;
+
+
+ --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);
+
+ 
+   /* ===== Effect ===== */
+  --blur: blur(8px);
+
+  --shadow-sm: -2px -2px 4px 2px var(--color-shadow-l),
+               2px  2px 4px 4px var(--color-shadow-d);
+
+  --shadow-sm-in: inset -4px -4px 4px var(--color-shadow-l),
+                  inset  4px  4px 4px var(--color-shadow-d);
+
+  --shadow-md: -4px -4px 16px 8px var(--color-shadow-l),
+               4px  4px 16px 8px var(--color-shadow-d);
+
+ /* ===== 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: 32px;
+
+  /* ===== Layout ===== */
+  --container: 1120px;
+}

package/dist/index.d.ts

@@ -1,9 +1,5 @@
 export { ThemeProvider } from "./components/ThemeProvider";
 export type { Theme } from "./components/ThemeProvider";
-import "./styles/reset.css";
-import "./styles/base.css";
-import "./styles/tokens/index.css";
-import "./styles/font.css";
 export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Radio";

package/dist/index.js

@@ -1,10 +1,5 @@
 /* ===== Theme ===== */
 export { ThemeProvider } from "./components/ThemeProvider";
-/* ===== Styles ===== */
-import "./styles/reset.css";
-import "./styles/base.css";
-import "./styles/tokens/index.css";
-import "./styles/font.css";
 /* ===== Components ===== */
 export * from "./components/Button";
 export * from "./components/Checkbox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Minimal React UI components with design tokens",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",