lucentia-ui 0.1.1

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SwitchProps } from "./types";
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Switch.module.css";
+export const Switch = ({ checked, defaultChecked, onChange, disabled = false, id, name, }) => {
+    return (_jsxs("label", { className: styles.switch, children: [_jsx("input", { type: "checkbox", id: id, name: name, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled }), _jsx("span", { className: styles.slider })] }));
+};

package/dist/components/Switch/Switch.module.css

@@ -0,0 +1,58 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 72px;
+  height: 40px;
+}
+
+/* input は見えなくするが状態は保持 */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* ===== Track ===== */
+.slider {
+  position: absolute;
+  inset: 0;
+  background: var(--color-surface-container);
+  border-radius: var(--radius-max);
+  box-shadow: var(--shadow-sm-in);
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+
+/* ===== Knob ===== */
+.slider::before {
+  content: "";
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  left: 8px;
+  top: 8px;
+  background: var(--color-on-primary);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-max);
+  transition: transform 0.2s ease;
+}
+
+/* ===== Checked ===== */
+.switch input:checked + .slider {
+  background: var(--color-primary);
+}
+
+.switch input:checked + .slider::before {
+  transform: translateX(32px);
+}
+
+/* ===== Focus ===== */
+.switch input:focus-visible + .slider {
+  outline: none;
+}
+
+/* ===== Disabled ===== */
+.switch input:disabled + .slider {
+  opacity: 0.25;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from "./Switch";
+const meta = {
+    title: "Components/Switch",
+    component: Switch,
+    args: {
+        defaultChecked: false,
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [_jsx(Switch, { defaultChecked: false }), _jsx(Switch, { defaultChecked: true }), _jsx(Switch, { defaultChecked: false, disabled: true }), _jsx(Switch, { defaultChecked: true, disabled: true })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./types";

package/dist/components/Switch/index.js

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./types";

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

@@ -0,0 +1,11 @@
+import type { ChangeEvent } from "react";
+export type SwitchProps = {
+    /** controlled */
+    checked?: boolean;
+    /** uncontrolled */
+    defaultChecked?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+};

package/dist/components/Switch/types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,11 @@
+"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;
+}

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

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

package/dist/components/ThemeProvider/index.js

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

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

@@ -0,0 +1 @@
+export type Theme = "light" | "dark";

package/dist/components/ThemeProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { ThemeProvider } from "./components/ThemeProvider";
+export type { Theme } from "./components/ThemeProvider";
+import "./styles/reset.css";
+import "./styles/base.css";
+import "./styles/index.css";
+import "./styles/font.css";
+export * from "./components/Button";
+export * from "./components/Checkbox";
+export * from "./components/Radio";
+export * from "./components/Input";
+export * from "./components/Select";
+export * from "./components/Switch";
+export * from "./components/Modal";

package/dist/index.js

@@ -0,0 +1,15 @@
+/* ===== Theme ===== */
+export { ThemeProvider } from "./components/ThemeProvider";
+/* ===== Styles (optional export) ===== */
+import "./styles/reset.css";
+import "./styles/base.css";
+import "./styles/index.css";
+import "./styles/font.css";
+/* ===== Components ===== */
+export * from "./components/Button";
+export * from "./components/Checkbox";
+export * from "./components/Radio";
+export * from "./components/Input";
+export * from "./components/Select";
+export * from "./components/Switch";
+export * from "./components/Modal";

package/dist/styles/font.css

@@ -0,0 +1,23 @@
+@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-face {
+  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;
+}

package/dist/styles/reset.css

@@ -0,0 +1,99 @@
+/* ------------------------------
+   Reset / Base
+   ------------------------------ */
+
+/* box-sizing を全要素に適用 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* マージン・パディングをリセット */
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+/* html / body 基本設定 */
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  line-height: 1.5;
+  font-family: var(--font, system-ui, -apple-system, sans-serif);
+  color: var(--color-text, #000);
+  background-color: var(--color-background, #fff);
+}
+
+/* リスト */
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* リンク */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* 画像・メディア */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* フォーム要素 */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+}
+
+/* button */
+button {
+  cursor: pointer;
+}
+
+/* textarea */
+textarea {
+  resize: vertical;
+}
+
+/* テーブル */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* アクセシビリティ */
+:focus-visible {
+  outline: 2px solid var(--color-primary, #00a1a1);
+  outline-offset: 2px;
+}

package/dist/styles/tokens/index.css

@@ -0,0 +1,2 @@
+@import "./theme-light.css";
+@import "./theme-dark.css";

package/dist/styles/tokens/theme-dark.css

@@ -0,0 +1,64 @@
+.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: #1a2120bf;
+ --color-on-surface: #dde4e3;
+
+
+ --color-surface-container: #262d2d;
+ --color-border: #889392;
+ --color-scrim:  rgba(0, 0, 0, 0.1);
+
+
+ --color-shadow-l: rgba(255, 255, 255, 0.25);
+ --color-shadow-d: rgba(0, 0, 0, 1);
+
+  --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/styles/tokens/theme-light.css

@@ -0,0 +1,67 @@
+.theme.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);
+
+  /* ===== Effect ===== */
+  --blur: blur(8px);
+
+  --color-shadow-l: rgba(255, 255, 255, 1);
+  --color-shadow-d: rgba(0, 0, 0, 0.2);
+
+  --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;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,114 @@
+:root {
+  /* 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);
+
+  /* ===== Effect ===== */
+  --blur: blur(8px);
+
+  --color-shadow-l: rgba(255, 255, 255, 1);
+  --color-shadow-d: rgba(0, 0, 0, 0.2);
+
+  --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-shadow-l: rgba(255, 255, 255, 0.25);
+ --color-shadow-d: rgba(0, 0, 0, 1);
+
+  --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);
+
+ --color-scrim:  rgba(0, 0, 0, 0.1);
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "lucentia-ui",
+  "version": "0.1.1",
+  "description": "Minimal React UI components with design tokens",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "dist/**/*.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cpy 'src/**/*.css' dist"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "cpy-cli": "^6.0.0"
+  }
+}