@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/styles.css

@@ -0,0 +1,162 @@
+/*
+ * love3 の web 用スタイル（`@lt-three/love3/web/styles.css`）。アプリの CSS の入口で 1 度だけ import する。
+ *
+ *   @import "@lt-three/love3/web/styles.css";
+ *
+ * 中身は、Tailwind v4 の本体・フォント・アニメーション・トークン（`@lt-three/love3/styles.css`）・ベーススタイル。
+ * トークンの値は `src/tokens/definition.ts`（SSOT）が持つ。ここにはトークンを書かない。
+ * `.theme-light` は生トークン（`bg-paper` / `text-ink-900` など）だけを明るくする。
+ * セマンティックなクラス（`bg-background` / `bg-primary` など）は明るくならないので、部品では使わない
+ * （公開ページを常にライトにしたいときは、生トークンのクラスを使うか、使う側で変数を再宣言する）。
+ */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+
+/* 欧文は Geist を self-host（Latin のみで軽量）。和文は游ゴシックの OS 同梱フォントを使い、未搭載なら sans-serif に落ちる */
+@import "@fontsource-variable/geist";
+/* 数字・ID・コード・データテーブルは Geist Mono */
+@import "@fontsource-variable/geist-mono";
+
+@import "tw-animate-css";
+
+/* トークン本体（@theme・ライト・ダーク）。生成物なので、値を変えるときは definition.ts を直す */
+@import "@lt-three/love3/styles.css";
+
+/*
+ * love3 の部品が使う Tailwind のクラスを拾う（部品は *.tsx。lib の *.ts にクラスは無い）。
+ * node_modules（workspace の symlink 越し）は自動検出の対象外なので、ここで明示する。
+ * `@source` のパスは、この CSS ファイルの位置が基準。
+ * 公開物（`dist/`）では部品が `*.js` になるので、`tsx` と `js` の両方を拾う（同じファイルを src と dist の両方に置く）。
+ * 使う側のアプリ自身のソースは、バンドラのプロジェクトルート（vite の root、postcss なら cwd）を基準にした
+ * 自動検出に任せる（この CSS の位置は関係しない）。
+ */
+@source "./**/*.{tsx,js}";
+@source not "./**/*.test.tsx";
+
+/*
+ * 通知（sonner）— overlay 面 + 1px の薄い枠 + 淡い影（shadow-md）。角丸は surface の段。
+ * state は左罫線ではなく、アイコンの色で表す（文字は通常色のまま）。
+ * sonner はスタイルを実行時に注入する（既定の `[data-sonner-toast][data-styled=true]` と同じ詳細度だと、読み込み順で負ける）ので、
+ * `[data-sonner-toaster]` と `[data-styled="true"]` を付けて詳細度を 1 つ上げて確実に勝つ（!important は使わない）。
+ */
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  box-shadow: var(--shadow-md);
+  font-size: 13px;
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="success"] [data-icon] {
+  color: var(--state-success);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="error"] [data-icon] {
+  color: var(--state-error);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="warning"] [data-icon] {
+  color: var(--state-warning);
+}
+
+@layer base {
+  html {
+    font-family: var(--font-primary), sans-serif;
+  }
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield !important;
+  }
+
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* 日本語は文節（bunsetsu）境界で改行し、単語の途中で折り返さない */
+    word-break: auto-phrase;
+  }
+
+  /* 見出しも本文と同じ Geist。フラッシュレフト、わずかに字間を詰める。 */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans, "Geist Variable", sans-serif);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    /* 見出しも文節境界で改行。意図した改行は文言側（i18n の \n）で制御する */
+    word-break: auto-phrase;
+  }
+  h1 {
+    @apply text-3xl my-2;
+    letter-spacing: -0.02em;
+  }
+  h2 {
+    @apply text-2xl my-2;
+    font-weight: 500;
+  }
+  h3 {
+    @apply text-xl my-2;
+    font-weight: 500;
+  }
+  h4 {
+    @apply text-lg my-2;
+    font-weight: 500;
+  }
+  h5 {
+    @apply text-base my-2;
+    font-weight: 500;
+  }
+  h6 {
+    @apply text-sm my-1;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+
+  /* 数字 / ID / コード / データはタブラー（等幅数字） */
+  code,
+  kbd,
+  samp,
+  pre,
+  [data-mono] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* テキスト選択はインディゴの淡い面。文字色は変えない */
+  ::selection {
+    background: color-mix(in srgb, var(--action) 30%, transparent);
+  }
+}
+
+/*
+ * テキストリンクの状態。
+ *   default: 文字のみ
+ *   hover:   1px の下線
+ *   active:  文字の塗りを抜いて、外側に 1px の縁取り + 下線（押している間）
+ * 色は currentColor に追従させるので、壁紙の上に載る白文字など、テキストの色を変えても同じ作法で効く。
+ * hover は即時に切り替える（transition なし）。
+ *
+ * 「外側だけの縁取り」は -webkit-text-stroke（輪郭の中心に引かれる）では作れないため、
+ * SVG フィルター #text-outside-stroke（文字を 1px 膨らませて元の文字を抜く）で作る。
+ * フィルターの定義は使う側のアプリが DOM に 1 つ置く。
+ */
+@utility text-outline {
+  filter: url(#text-outside-stroke);
+}
+
+@utility text-link {
+  text-underline-position: from-font;
+  text-decoration-thickness: 1px;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  &:active {
+    text-decoration-line: underline;
+    filter: url(#text-outside-stroke);
+  }
+}

package/package.json

@@ -1,8 +1,207 @@
 {
   "name": "@lt-three/love3",
-  "version": "0.0.0",
-  "description": "Placeholder. The design system is published from CI (npm Trusted Publisher).",
+  "version": "0.1.0",
+  "description": "<3（Less Than Three）共通のデザインシステム。web・React Native（NativeWind）・トークンを 1 パッケージで配信する",
+  "keywords": [
+    "design-system",
+    "nativewind",
+    "react",
+    "react-native",
+    "tailwindcss",
+    "tokens"
+  ],
   "license": "MIT",
-  "files": ["README.md", "LICENSE"],
-  "publishConfig": { "access": "public" }
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "default": "./dist/tokens/index.js"
+    },
+    "./tokens/contrast": {
+      "types": "./dist/tokens/contrast-pairs.d.ts",
+      "default": "./dist/tokens/contrast-pairs.js"
+    },
+    "./tuning": {
+      "types": "./dist/tuning/index.d.ts",
+      "default": "./dist/tuning/index.js"
+    },
+    "./tuning/*.ts": {
+      "types": "./dist/tuning/*.d.ts",
+      "default": "./dist/tuning/*.js"
+    },
+    "./styles.css": "./dist/tokens/styles.gen.css",
+    "./shared": {
+      "types": "./dist/shared/index.d.ts",
+      "default": "./dist/shared/index.js"
+    },
+    "./shared/*.ts": {
+      "types": "./dist/shared/*.d.ts",
+      "default": "./dist/shared/*.js"
+    },
+    "./shared/*.tsx": {
+      "types": "./dist/shared/*.d.ts",
+      "default": "./dist/shared/*.js"
+    },
+    "./web": {
+      "types": "./dist/web/index.d.ts",
+      "default": "./dist/web/index.js"
+    },
+    "./web/*.ts": {
+      "types": "./dist/web/*.d.ts",
+      "default": "./dist/web/*.js"
+    },
+    "./web/*.tsx": {
+      "types": "./dist/web/*.d.ts",
+      "default": "./dist/web/*.js"
+    },
+    "./native": {
+      "types": "./dist/native/index.d.ts",
+      "default": "./dist/native/index.js"
+    },
+    "./native/*.ts": {
+      "types": "./dist/native/*.d.ts",
+      "default": "./dist/native/*.js"
+    },
+    "./native/*.tsx": {
+      "types": "./dist/native/*.d.ts",
+      "default": "./dist/native/*.js"
+    },
+    "./web/styles.css": "./dist/web/styles.css",
+    "./native/styles.css": "./dist/native/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@radix-ui/react-accordion": "^1.3.1",
+    "@radix-ui/react-avatar": "^1.3.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-scroll-area": "^1.4.0",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-separator": "^1.2.0",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
+    "@tanstack/charts": "^1.4.0",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-pacer": "^0.24.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "es-toolkit": "^1.52.0",
+    "lucide-react": "^1.60.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.6.7"
+  },
+  "peerDependencies": {
+    "@expo/ui": ">=58.0.21",
+    "@expo/vector-icons": ">=15.1.1",
+    "@react-native-community/datetimepicker": ">=9.2.1",
+    "@react-native-community/netinfo": ">=12.0.1",
+    "@react-native-community/slider": ">=5.2.1",
+    "@rn-primitives/slot": ">=1.5.2",
+    "expo": ">=58.0.16",
+    "expo-glass-effect": ">=58.0.4",
+    "expo-image": ">=58.0.16",
+    "expo-router": ">=58.0.24",
+    "expo-symbols": ">=58.0.4",
+    "nativewind": ">=5.0.0-rc.0",
+    "react": ">=19.3.0 <20",
+    "react-dom": ">=19.3.0 <20",
+    "react-native": ">=0.88.0",
+    "react-native-css": ">=3.0.7",
+    "react-native-gesture-handler": ">=3.4.0",
+    "react-native-reanimated": ">=4.7.1",
+    "react-native-reorderable-list": ">=0.18.2",
+    "react-native-safe-area-context": ">=5.10.1",
+    "react-native-svg": ">=15.16.0",
+    "react-native-worklets": ">=0.13.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    },
+    "@expo/vector-icons": {
+      "optional": true
+    },
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
+    "@react-native-community/netinfo": {
+      "optional": true
+    },
+    "@react-native-community/slider": {
+      "optional": true
+    },
+    "@rn-primitives/slot": {
+      "optional": true
+    },
+    "expo": {
+      "optional": true
+    },
+    "expo-glass-effect": {
+      "optional": true
+    },
+    "expo-image": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    },
+    "expo-symbols": {
+      "optional": true
+    },
+    "nativewind": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-css": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-reorderable-list": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  }
 }