lucentia-ui 0.1.3 → 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.module.css

@@ -33,12 +33,12 @@
   --color-border: #6f7979;
   --color-scrim: rgba(129, 129, 129, 0.25);
 
-  /* ===== Effect ===== */
-  --blur: blur(8px);
-
   --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);
 
@@ -101,12 +101,16 @@
 
  --color-surface-container: #262d2d;
  --color-border: #889392;
- --color-scrim:  rgba(0, 0, 0, 0.1);
+ --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);
 

package/package.json

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