lucentia-ui 0.1.8 → 0.2.0

package/README.md

@@ -1,151 +1,5 @@
 # lucentia-ui
 
-ニューモーフィズムを基調としたReact UI デザイントークン&コンポーネント。ライト/ダークの2カラーテーマを保持。
+React UI design token and component system based on neumorphism, featuring two color themes: light and dark.
 
----
-
-## インストール方法
-
-```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">
-```
-
-## 追加CSSのFont.css、Base.cssの導入は任意
-- `base` : reset, box-sizing, typography base, color tokens
-- `font` : Noto Sans JP font-face definitions
-
-```tsx
-import "lucentia-ui/styles/base";
-import "lucentia-ui/styles/font";
-```
-
-
-### 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" />
-    </>
-  );
-}
-```
-
-- 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 { ThemeProvider, Button } from "lucentia-ui";
-
-export default function App() {
-  return (
-    <ThemeProvider theme="dark">
-    {children}
-    </ThemeProvider>
-  );
-}
-```
-
-
-
-## コンポーネント設計方針
-
-- **HTML ネイティブ要素を尊重**
-- **props extends HTMLAttributes**
-- **状態・色・サイズは Design Tokens に依存**
-- **Tailwind / inline style 不使用**
-
----
-
-## 提供コンポーネント
-
-- Button
-- Checkbox
-- Radio
-- Input
-- Select
-- Switch
-- Textarea
-- Modal
-
-
----
-
-## 注意事項
-
-- **ThemeProvider を使わない場合**  
-  → CSS Variables が未定義になり表示が崩れます
-
-- **CSS の上書きは非推奨**  
-  （Tokens 拡張を想定）
-
-
----
-
-## License
-
-MIT
+-

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./Button.module.css";
 import clsx from "clsx";
-export const Button = ({ variant = "default", size = "md", className, ...props }) => {
+export const Button = ({ variant = "ghost", size = "md", className, ...props }) => {
     return (_jsx("button", { className: clsx(styles.button, styles[variant], styles[size], className), ...props }));
 };

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

@@ -6,19 +6,20 @@
 
   border-radius: var(--radius-sm);
 
-
-  transition: box-shadow 0.2s ease, opacity 0.2s ease,
-    background 0.25s ease-in-out, color 0.25s ease;
+  transition:
+    box-shadow 0.2s ease,
+    opacity 0.2s ease,
+    background 0.25s ease-in-out,
+    color 0.25s ease;
 }
 
 /* ===== Variant ===== */
-.default {
-  background: var(--color-surface-container);
+.ghost {
+  background: var(--color-surface);
   color: var(--color-on-surface);
 }
-.default:hover:not(:disabled) {
-  border: 2px solid var(--color-border);
-  box-shadow: 0 0 4px var(--color-border), 0 0 8px var(--color-border);
+.ghost:hover:not(:disabled) {
+  background: var(--color-surface-container);
 }
 
 .primary {
@@ -26,9 +27,25 @@
   color: var(--color-on-primary-container);
 }
 
-.primary:hover:not(:disabled) {
+.sm.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 2px var(--color-primary),
+    0 0 4px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
   border: 2px solid var(--color-primary);
-  box-shadow: 0 0 4px var(--color-primary), 0 0 8px var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
 }
 
 .secondary {
@@ -36,21 +53,40 @@
   color: var(--color-on-secondary-container);
 }
 
-.secondary:hover:not(:disabled) {
+.sm.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow:
+    0 0 2px var(--color-secondary),
+    0 0 4px var(--color-secondary);
+}
+
+.md.secondary:hover:not(:disabled) {
   border: 2px solid var(--color-secondary);
-  box-shadow: 0 0 4px var(--color-secondary), 0 0 8px var(--color-secondary);
+  box-shadow:
+    0 0 4px var(--color-secondary),
+    0 0 8px var(--color-secondary);
 }
 
-.error {
+.danger {
   background: var(--color-error-container);
   color: var(--color-on-error-container);
 }
 
-.error:hover:not(:disabled) {
+.sm.danger:hover:not(:disabled) {
   border: 2px solid var(--color-error);
-  box-shadow: 0 0 4px var(--color-error), 0 0 8px var(--color-error);
+  box-shadow:
+    0 0 2px var(--color-error),
+    0 0 4px var(--color-error);
 }
 
+.md.danger:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow:
+    0 0 4px var(--color-error),
+    0 0 8px var(--color-error);
+}
+
+
 /* ===== Size ===== */
 
 .sm {
@@ -62,7 +98,7 @@
 .md {
   padding: var(--space-sm) var(--space-2xl);
   font-size: 1rem;
-    box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-md);
 }
 
 /* ===== State ===== */

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

@@ -5,13 +5,13 @@ const meta = {
     component: Button,
     args: {
         children: "Button",
-        variant: "default",
+        variant: "ghost",
         size: "md",
     },
     argTypes: {
         variant: {
             control: "radio",
-            options: ["default", "primary", "secondary", "error"],
+            options: ["ghost", "primary", "secondary", "danger"],
             description: "Buttonの表示バリエーション",
         },
         size: {
@@ -31,11 +31,26 @@ const meta = {
 export default meta;
 export const Default = {};
 export const State = {
-    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" })] })),
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
 };
 export const Variants = {
-    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" })] })),
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "danger", children: "Danger" })] })),
 };
 export const Sizes = {
-    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" })] })),
+    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/Button/types.d.ts

@@ -1,4 +1,4 @@
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "default" | "primary" | "secondary" | "error";
+    variant?: "ghost" | "primary" | "secondary" | "danger";
     size?: "sm" | "md";
 }

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

@@ -62,8 +62,8 @@
   --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 1px var(--color-shadow-l),
-    inset 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);
@@ -108,11 +108,11 @@
   /* ===== Effect ===== */
   --blur: blur(8px);
 
-  --shadow-sm: -2px -2px 2px 1px var(--color-shadow-l),
+  --shadow-sm: -2px -2px 2px  var(--color-shadow-l),
     2px 2px 2px 1px var(--color-shadow-d);
 
-  --shadow-sm-in: inset -2px -2px 2px 1px var(--color-shadow-l),
-    inset 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);

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { ThemeProvider } from "./components/ThemeProvider";
 export type { Theme } from "./components/ThemeProvider";
 export * from "./components/Button";
 export * from "./components/Checkbox";
+export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";

package/dist/index.js

@@ -3,6 +3,7 @@ export { ThemeProvider } from "./components/ThemeProvider";
 /* ===== Components ===== */
 export * from "./components/Button";
 export * from "./components/Checkbox";
+export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "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",
@@ -23,7 +23,9 @@
     "react": ">=18"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && cpy 'src/**/*.css' dist"
+    "build": "tsc -p tsconfig.json && npm run copy:assets",
+    "copy:assets": "cpy \"**/*.module.css\" ../dist --cwd=src --parents",
+    "prepublishOnly": "npm run build"
   },
   "license": "MIT",
   "dependencies": {
@@ -32,4 +34,4 @@
   "devDependencies": {
     "cpy-cli": "^6.0.0"
   }
-}
+}