@zenkigen-inc/component-ui 1.22.0 → 2.0.0-rc.0

package/README.md

@@ -15,20 +15,17 @@
 yarn add @zenkigen-inc/component-ui @zenkigen-inc/component-config
 ```
 
-Tailwind CSSの設定に以下を追加する。
-
-```diff
-{
-
-  content: [
-+ './node_modules/@zenkigen-inc/**/*.{js,ts,tsx}',
-  ],
-  presets: [
-+    require('@zenkigen-inc/component-config')
-  ],
-}
+**Tailwind CSS v4 が必須です。** CSS エントリ（例: `globals.css`）に以下を追加する。
+
+```css
+@import 'tailwindcss';
+@import '@zenkigen-inc/component-ui/styles';
 ```
 
+`@zenkigen-inc/component-ui/styles` は、デザイントークンの読み込み（`@zenkigen-inc/component-config/styles`）と、コンポーネントが実行時に参照する動的クラスの検出（`@source`）をまとめて提供する。`node_modules` への相対パス指定は不要。
+
+PostCSS プラグインは `@tailwindcss/postcss` を使用する（`autoprefixer` は不要）。v1.x（Tailwind v3 / JS preset）からの移行手順は [v1 → v2 移行ガイド](https://github.com/zenkigen/zenkigen-component/blob/main/docs/migration-v1-to-v2.md) を参照。
+
 ## 利用方法
 
 ```tsx

package/dist/index.js

@@ -318,7 +318,7 @@ var CheckedIcon = ({ size = "medium" }) => {
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: (0, import_clsx5.default)("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: (0, import_clsx5.default)("absolute z-10 rounded-xs fill-iconOnColor hover:rounded-xs", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
@@ -343,7 +343,7 @@ var MinusIcon = ({ size = "medium" }) => {
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: (0, import_clsx6.default)("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: (0, import_clsx6.default)("absolute z-10 rounded-xs fill-iconOnColor hover:rounded-xs", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
@@ -383,7 +383,7 @@ function Checkbox({
     "cursor-pointer": !isDisabled
   });
   const boxClasses = (0, import_clsx7.default)(
-    "inline-flex items-center justify-center rounded-sm border bg-white",
+    "inline-flex items-center justify-center rounded-xs border bg-white",
     sizeBox,
     import_component_theme3.focusVisible.normalPeer,
     {
@@ -399,7 +399,7 @@ function Checkbox({
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = (0, import_clsx7.default)("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = (0, import_clsx7.default)("absolute inset-0 m-auto block rounded-xs", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -677,7 +677,7 @@ function TextInputInner({
     "pr-2": !isBorderless && size === "medium" && hasTrailingElement,
     "pr-3": !isBorderless && (size === "large" || size === "x-large") && hasTrailingElement
   });
-  const inputClasses = (0, import_clsx11.clsx)("flex-1 bg-transparent outline-none", {
+  const inputClasses = (0, import_clsx11.clsx)("flex-1 bg-transparent outline-hidden", {
     "disabled:text-textPlaceholder": !isBorderless,
     "disabled:text-disabled01": isBorderless,
     // outline: 従来の padding
@@ -3630,7 +3630,7 @@ function Radio({
     { "size-5": !isLarge, "size-7": isLarge },
     import_component_theme14.focusVisible.normalPeer,
     {
-      "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
+      "border-disabled01 hover:border-disabled01": isDisabled,
       "border-hoverUiBorder": !isDisabled && isMouseOver,
       "border-uiBorder04": !isDisabled,
       "cursor-not-allowed": isDisabled,
@@ -3889,7 +3889,7 @@ var Search = (0, import_react56.forwardRef)(({ width = "100%", size = "medium",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = (0, import_clsx36.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx36.clsx)("mx-2 h-full flex-1 text-text01 outline-hidden placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -4828,7 +4828,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = (0, import_clsx53.clsx)("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = (0, import_clsx53.clsx)("w-full border-none bg-uiBackground01 outline-hidden", {
     // outline: 従来の padding
     "typography-body14regular px-2 py-2": !isBorderless && size === "medium",
     "typography-body16regular px-3 py-2": !isBorderless && size === "large",

package/dist/index.mjs

@@ -233,7 +233,7 @@ var CheckedIcon = ({ size = "medium" }) => {
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: clsx5("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: clsx5("absolute z-10 rounded-xs fill-iconOnColor hover:rounded-xs", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
@@ -258,7 +258,7 @@ var MinusIcon = ({ size = "medium" }) => {
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: clsx6("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: clsx6("absolute z-10 rounded-xs fill-iconOnColor hover:rounded-xs", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
@@ -298,7 +298,7 @@ function Checkbox({
     "cursor-pointer": !isDisabled
   });
   const boxClasses = clsx7(
-    "inline-flex items-center justify-center rounded-sm border bg-white",
+    "inline-flex items-center justify-center rounded-xs border bg-white",
     sizeBox,
     focusVisible2.normalPeer,
     {
@@ -314,7 +314,7 @@ function Checkbox({
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = clsx7("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = clsx7("absolute inset-0 m-auto block rounded-xs", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -592,7 +592,7 @@ function TextInputInner({
     "pr-2": !isBorderless && size === "medium" && hasTrailingElement,
     "pr-3": !isBorderless && (size === "large" || size === "x-large") && hasTrailingElement
   });
-  const inputClasses = clsx11("flex-1 bg-transparent outline-none", {
+  const inputClasses = clsx11("flex-1 bg-transparent outline-hidden", {
     "disabled:text-textPlaceholder": !isBorderless,
     "disabled:text-disabled01": isBorderless,
     // outline: 従来の padding
@@ -3555,7 +3555,7 @@ function Radio({
     { "size-5": !isLarge, "size-7": isLarge },
     focusVisible12.normalPeer,
     {
-      "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
+      "border-disabled01 hover:border-disabled01": isDisabled,
       "border-hoverUiBorder": !isDisabled && isMouseOver,
       "border-uiBorder04": !isDisabled,
       "cursor-not-allowed": isDisabled,
@@ -3814,7 +3814,7 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = clsx36("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = clsx36("mx-2 h-full flex-1 text-text01 outline-hidden placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -4753,7 +4753,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = clsx53("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = clsx53("w-full border-none bg-uiBackground01 outline-hidden", {
     // outline: 従来の padding
     "typography-body14regular px-2 py-2": !isBorderless && size === "medium",
     "typography-body16regular px-3 py-2": !isBorderless && size === "large",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.22.0",
+  "version": "2.0.0-rc.0",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -14,7 +14,8 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./styles": "./styles.css"
   },
   "scripts": {
     "type-check": "tsc --noEmit",
@@ -34,13 +35,14 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.19",
-    "@zenkigen-inc/component-config": "1.22.0",
-    "@zenkigen-inc/component-icons": "1.22.0",
-    "@zenkigen-inc/component-theme": "1.22.0",
+    "@floating-ui/react": "0.27.20",
+    "@zenkigen-inc/component-config": "2.0.0-rc.0",
+    "@zenkigen-inc/component-icons": "2.0.0-rc.0",
+    "@zenkigen-inc/component-theme": "2.0.0-rc.0",
     "clsx": "2.1.1",
     "react-day-picker": "9.14.0"
   }

package/styles.css

@@ -0,0 +1,8 @@
+/* zenkigen-component 利用側のエントリポイント。
+   デザイントークン（component-config/styles）の読み込みと、コンポーネントが
+   実行時に参照する動的クラスの検出（@source）をまとめて提供する。
+   @source の相対パスはこのファイルの場所基準で解決される。 */
+@import '@zenkigen-inc/component-config/styles';
+@import '@zenkigen-inc/component-theme/source';
+
+@source './dist/**/*.mjs';