ingred-ui 26.1.0 → 27.0.0

package/bin/README.md

@@ -41,14 +41,27 @@ npx ingred-ui-codemod palette-v2 ./src
 | `palette.danger.light`     | `palette.danger.lighter`    |
 | `palette.warning.deepDark` | `palette.warning.ultraDark` |
 | `colors.basic`             | `colors.gray`               |
-| `color="gray"`             | `color="neutral"`           |
+| `color="gray"`             | `color="secondaryDark"`（Button 等） |
+
+後続ステップで **Button / Badge の旧 `color` 文字列**も置換します（`palette-v2` 内の [5/7]〜[7/7]）。
+
+| 対象（例） | 新 |
+| --- | --- |
+| `color="gray"`（Button） | `color="secondaryDark"` |
+| `color="primaryPale"` | `color="primarySubtle"` |
+| `color="basicLight"` | `color="secondaryLight"` |
+| `color="neutral"`（Button 等） | `color="secondaryDark"` |
+| `<Badge color="secondary"` | `<Badge color="secondaryDark"` |
+| `<Badge color="basic"` | `<Badge color="inverse"` |
+
+**注意:** `color="neutral"` の置換は **Typography の `color` や styled-components の CSS 値**にもマッチする可能性があります。置換後は必ず型チェックと差分確認を行ってください。
 
 **手動対応が必要なもの:**
 
 以下のパターンは自動置換せず、警告のみ表示します。
 
-- `primaryPale` — 廃止。`palette.primary` の適切なスロットに置き換えてください。
-- `basicDark` — 廃止。`color="neutral"` に置き換えてください。
+- `primaryPale`（palette 等の **パレット参照**）— 廃止。`palette.primary` の適切なスロットに置き換えてください。
+- `basicDark` — 廃止。Button 等は `color="secondaryDark"` に置き換えてください。
 - `colors.blue[40]` — 廃止。`colors.blue[50]` に置き換えてください。
 
 ## オプション

package/bin/codemods/palette-v2.mjs

@@ -37,7 +37,7 @@ function findFiles(dir) {
 
 const STEPS = [
   {
-    label: "[1/6] palette.gray → palette.neutral（段名変更含む）",
+    label: "[1/7] palette.gray → palette.neutral（段名変更含む）",
     replacements: [
       {
         pattern: /palette\.gray\.deepDark/g,
@@ -72,7 +72,7 @@ const STEPS = [
     ],
   },
   {
-    label: "[2/6] colors.basic → colors.gray",
+    label: "[2/7] colors.basic → colors.gray",
     replacements: [
       {
         pattern: /colors\.basic/g,
@@ -82,7 +82,7 @@ const STEPS = [
     ],
   },
   {
-    label: "[3/6] palette.*.main → palette.*.base",
+    label: "[3/7] palette.*.main → palette.*.base",
     replacements: [
       {
         pattern: /palette\.primary\.main/g,
@@ -112,7 +112,7 @@ const STEPS = [
     ],
   },
   {
-    label: "[4/6] 段名の修正（旧色値を維持するための付け替え）",
+    label: "[4/7] 段名の修正（旧色値を維持するための付け替え）",
     replacements: [
       {
         pattern: /palette\.primary\.light/g,
@@ -152,17 +152,93 @@ const STEPS = [
     ],
   },
   {
-    label: "[5/6] Button color prop",
+    label: "[5/7] Button color（旧 gray）",
     replacements: [
       {
         pattern: /color="gray"/g,
-        replacement: 'color="neutral"',
-        description: 'color="gray" → color="neutral"',
+        replacement: 'color="secondaryDark"',
+        description: 'color="gray" → color="secondaryDark"',
       },
       {
         pattern: /color='gray'/g,
-        replacement: "color='neutral'",
-        description: "color='gray' → color='neutral'",
+        replacement: "color='secondaryDark'",
+        description: "color='gray' → color='secondaryDark'",
+      },
+    ],
+  },
+  {
+    label: "[6/7] Button color（primaryPale / basicLight / neutral）",
+    replacements: [
+      {
+        pattern: /color="primaryPale"/g,
+        replacement: 'color="primarySubtle"',
+        description: 'color="primaryPale" → color="primarySubtle"',
+      },
+      {
+        pattern: /color='primaryPale'/g,
+        replacement: "color='primarySubtle'",
+        description: "color='primaryPale' → color='primarySubtle'",
+      },
+      {
+        pattern: /color="basicLight"/g,
+        replacement: 'color="secondaryLight"',
+        description: 'color="basicLight" → color="secondaryLight"',
+      },
+      {
+        pattern: /color='basicLight'/g,
+        replacement: "color='secondaryLight'",
+        description: "color='basicLight' → color='secondaryLight'",
+      },
+      {
+        pattern: /color="neutral"/g,
+        replacement: 'color="secondaryDark"',
+        description:
+          'color="neutral" → color="secondaryDark"（Button 等の color プロップ向け。palette.neutral や Typography とは別なので要確認）',
+      },
+      {
+        pattern: /color='neutral'/g,
+        replacement: "color='secondaryDark'",
+        description: "color='neutral' → color='secondaryDark'",
+      },
+      {
+        pattern: /color: "primaryPale"/g,
+        replacement: 'color: "primarySubtle"',
+        description: 'color: "primaryPale" → color: "primarySubtle"',
+      },
+      {
+        pattern: /color: "basicLight"/g,
+        replacement: 'color: "secondaryLight"',
+        description: 'color: "basicLight" → color: "secondaryLight"',
+      },
+      {
+        pattern: /color: "neutral"/g,
+        replacement: 'color: "secondaryDark"',
+        description: 'color: "neutral" → color: "secondaryDark"',
+      },
+    ],
+  },
+  {
+    label: "[7/7] Badge color（secondary / basic）",
+    replacements: [
+      {
+        pattern: /<Badge color="secondary"/g,
+        replacement: '<Badge color="secondaryDark"',
+        description: 'Badge color="secondary" → color="secondaryDark"',
+      },
+      {
+        pattern: /<Badge color='secondary'/g,
+        replacement: "<Badge color='secondaryDark'",
+        description: "Badge color='secondary' → color='secondaryDark'",
+      },
+      {
+        pattern: /<Badge color="basic"/g,
+        replacement: '<Badge color="inverse"',
+        description: 'Badge color="basic" → color="inverse"',
+      },
+      {
+        pattern: /<Badge color='basic'/g,
+        replacement: "<Badge color='inverse'",
+        description: "Badge color='basic' → color='inverse'",
       },
     ],
   },
@@ -177,7 +253,7 @@ const WARNING_PATTERNS = [
   {
     pattern: /basicDark/,
     description:
-      "basicDark は廃止されました。color=\"neutral\" に置き換えてください。",
+      "basicDark は廃止されました。Button 等の color は color=\"secondaryDark\" に置き換えてください。",
   },
   {
     pattern: /blue\[40\]/,

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

@@ -2,5 +2,5 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { AdvancedFilter } from "./AdvancedFilter";
 declare const meta: Meta<typeof AdvancedFilter>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof AdvancedFilter>;
 export declare const Default: Story;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Theme } from "../../themes";
-export type BadgeColor = "primary" | "secondary" | "success" | "warning" | "danger" | "basic";
+export type BadgeColor = "primary" | "secondaryDark" | "success" | "warning" | "danger" | "inverse";
 export type BadgeType = "normal" | "pill" | "signal";
 export type BadgeSize = "xs" | "small" | "medium";
 export declare const BADGE_SIZE: {
@@ -41,53 +41,53 @@ export declare const BADGE_SIZE: {
 export declare const BACKGROUND_COLOR_MAP: {
     normal: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
     pill: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
     signal: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
 };
 export declare const TEXT_COLOR_MAP: {
     normal: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
     pill: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
     signal: {
         primary: (theme: Theme) => string;
-        secondary: (theme: Theme) => string;
+        secondaryDark: (theme: Theme) => string;
         success: (theme: Theme) => string;
         warning: (theme: Theme) => string;
         danger: (theme: Theme) => string;
-        basic: (theme: Theme) => string;
+        inverse: (theme: Theme) => string;
     };
 };
 export declare const getBackgroundColor: (key: BadgeColor, theme: Theme, type: BadgeType) => string;

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Theme } from "../../themes";
 export type ButtonSize = "small" | "medium" | "large";
-export type ButtonColor = "primary" | "primaryPale" | "basicLight" | "neutral" | "danger" | "clear";
+export type ButtonColor = "primary" | "primarySubtle" | "secondaryLight" | "secondaryDark" | "danger" | "clear";
 export type ButtonColorStyle = {
     normal: {
         background: string;

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

@@ -21,8 +21,8 @@ export declare const Primary: StoryObj<ButtonProps>;
 export declare const BasicLight: StoryObj<ButtonProps>;
 export declare const Danger: StoryObj<ButtonProps>;
 export declare const Clear: StoryObj<ButtonProps>;
-export declare const BasicDark: StoryObj<ButtonProps>;
-export declare const PrimaryPale: StoryObj<ButtonProps>;
+export declare const SecondaryDark: StoryObj<ButtonProps>;
+export declare const PrimarySubtle: StoryObj<ButtonProps>;
 export declare const Small: StoryObj<ButtonProps>;
 export declare const Medium: StoryObj<ButtonProps>;
 export declare const Large: StoryObj<ButtonProps>;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import { type TableColumn, type TableAction } from "./index";
+import { type TableColumn, type TableAction, DataTable2 } from "./index";
 declare const meta: {
     title: string;
     component: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, }: {
@@ -66,8 +66,8 @@ export default meta;
  * </DataTable2>
  * ```
  */
-export declare const Default: StoryObj<typeof meta>;
-export declare const Sample: StoryObj<typeof meta>;
+export declare const Default: StoryObj<typeof DataTable2>;
+export declare const Sample: StoryObj<typeof DataTable2>;
 /**
  * 以下のように、セルの loading を true に設定すると、スピナーが表示されます。
  * ```
@@ -78,4 +78,4 @@ export declare const Sample: StoryObj<typeof meta>;
  * また、DataTable2 の props について `rowControls` や `extraButtons` を未指定にすると、該当機能のボタンが表示されません。
  * 「カラム」でフィルターやソートを明示しない場合も、それらの機能は非表示になります。
  */
-export declare const Loading: StoryObj<typeof meta>;
+export declare const Loading: StoryObj<typeof DataTable2>;

package/dist/components/DataTable2/types/tableActions.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ButtonColor } from "../../Button/Button";
 /**
  * テーブルアクションボタン群の定義。enabledWhenとdisplayInで表示場所を制御：
  * - enabledWhen: "checked" + displayIn: "toolbar" → デスクトップ時は左側の直接ボタン、モバイル時は「n件を操作」ドロップダウン
@@ -11,7 +12,7 @@ export type TableAction = {
     label: string;
     icon?: React.ReactNode;
     onClick: (selectedRows: string[]) => void;
-    color?: "danger" | "primary" | "primaryPale" | "basicLight" | "neutral" | "clear";
+    color?: ButtonColor;
     displayIn?: "toolbar" | "dropdown";
     enabledWhen?: "checked" | "unchecked" | "custom";
     /** 追加の無効化条件。enabledWhenの基本条件に加えて評価される（customの場合はこの関数の結果のみで決定） */
@@ -28,7 +29,7 @@ export type TableAction = {
         label: string;
         icon?: React.ReactNode;
         onClick: (selectedRows: string[]) => void;
-        color?: "danger" | "primary" | "primaryPale" | "basicLight" | "neutral" | "clear";
+        color?: ButtonColor;
         enabledWhen?: "checked" | "unchecked" | "custom";
         /** 追加の無効化条件。enabledWhenの基本条件に加えて評価される（customの場合はこの関数の結果のみで決定） */
         disabled?: (checkedRows: string[]) => boolean;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Drawer from "./Drawer";
 declare const meta: Meta<typeof Drawer>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Drawer>;
 export declare const Default: Story;
 export declare const Responsive: Story;
 export declare const WithStickyHeaderFooter: Story;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
+import { FilterComboBox } from "./index";
 declare const meta: {
     title: string;
     component: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, searchPlaceholder, noResultsMessage, disabled, applyButtonText, cancelButtonText, error, placement, middleware, }: {
@@ -41,7 +42,7 @@ declare const meta: {
     argTypes: {
         size: {
             control: {
-                type: string;
+                type: "radio";
             };
             options: string[];
             description: string;
@@ -56,7 +57,7 @@ declare const meta: {
         };
         variant: {
             control: {
-                type: string;
+                type: "radio";
             };
             options: string[];
             description: string;
@@ -71,7 +72,7 @@ declare const meta: {
         };
         tagVariant: {
             control: {
-                type: string;
+                type: "radio";
             };
             options: string[];
             description: string;
@@ -105,7 +106,7 @@ export default meta;
  * 例:
  * options の項目が `[ "イルカ", ["パンダ", "ぱんだ", "熊猫"], "ライオン" ]` の場合、ユーザー入力が "ぱんだ"、"パン"、"猫" と入力したときにどの場合にも「パンダ」がフィルタリングされます。
  */
-export declare const Default: StoryObj<typeof meta>;
+export declare const Default: StoryObj<typeof FilterComboBox>;
 /**
  * サイズバリエーション
  *
@@ -113,7 +114,7 @@ export declare const Default: StoryObj<typeof meta>;
  * - medium: 高さ32px（デフォルト）
  * - large: 高さ40px
  */
-export declare const Sizes: StoryObj<typeof meta>;
+export declare const Sizes: StoryObj<typeof FilterComboBox>;
 /**
  * カラーバリエーション
  *
@@ -128,18 +129,18 @@ export declare const Sizes: StoryObj<typeof meta>;
  * コンポーネントのvariantに応じてタグのvariantが自動的に切り替わります。
  * variantが"light"の場合はタグは"dark"に、variantが"dark"の場合はタグは"light"になります。
  */
-export declare const Variants: StoryObj<typeof meta>;
+export declare const Variants: StoryObj<typeof FilterComboBox>;
 /**
  * 無効状態のサンプル
  */
-export declare const Disabled: StoryObj<typeof meta>;
+export declare const Disabled: StoryObj<typeof FilterComboBox>;
 /**
  * エラー状態
  */
-export declare const Error: StoryObj<typeof meta>;
+export declare const Error: StoryObj<typeof FilterComboBox>;
 /**
  * Middleware使用例
  *
  * Floating UIのmiddlewareを使用してメニューの位置を細かく制御できます。
  */
-export declare const WithCustomMiddleware: StoryObj<typeof meta>;
+export declare const WithCustomMiddleware: StoryObj<typeof FilterComboBox>;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
+import { FilterInputAbstract } from "./FilterInputAbstract";
 declare const meta: {
     title: string;
     component: ({ selectedIndex, selectOptions, onSelectChange, children, size, variant, disabled, error, isOpen, }: {
@@ -19,7 +20,7 @@ declare const meta: {
     argTypes: {
         size: {
             control: {
-                type: string;
+                type: "select";
             };
             options: string[];
             description: string;
@@ -39,8 +40,8 @@ export default meta;
  * Internal use only!
  * このコンポーネントは内部利用専用です。プロダクトには利用しないでください。
  */
-export declare const Default: StoryObj<typeof meta>;
+export declare const Default: StoryObj<typeof FilterInputAbstract>;
 /**
  * サイズバリエーション
  */
-export declare const Sizes: StoryObj<typeof meta>;
+export declare const Sizes: StoryObj<typeof FilterInputAbstract>;

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

@@ -8,7 +8,7 @@ export default meta;
  *
  * 自動で横 100% に広がります。必要に応じて、親要素の幅を指定してください。
  */
-export declare const Default: StoryObj<typeof meta>;
+export declare const Default: StoryObj<typeof FilterSelectInput>;
 /**
  * サイズバリエーション
  *
@@ -16,16 +16,16 @@ export declare const Default: StoryObj<typeof meta>;
  * - medium: 高さ32px（デフォルト）
  * - large: 高さ40px
  */
-export declare const Sizes: StoryObj<typeof meta>;
-export declare const Variants: StoryObj<typeof meta>;
+export declare const Sizes: StoryObj<typeof FilterSelectInput>;
+export declare const Variants: StoryObj<typeof FilterSelectInput>;
 /**
  * 無効化状態のサンプル
  */
-export declare const Disabled: StoryObj<typeof meta>;
-export declare const Error: StoryObj<typeof meta>;
+export declare const Disabled: StoryObj<typeof FilterSelectInput>;
+export declare const Error: StoryObj<typeof FilterSelectInput>;
 /**
  * Middleware使用例
  *
  * Floating UIのmiddlewareを使用してメニューの位置を細かく制御できます。
  */
-export declare const WithCustomMiddleware: StoryObj<typeof meta>;
+export declare const WithCustomMiddleware: StoryObj<typeof FilterSelectInput>;

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

@@ -40,8 +40,8 @@ export default meta;
  * ```
  *
  */
-export declare const Default: StoryObj<typeof meta>;
-export declare const Sizes: StoryObj<typeof meta>;
-export declare const Variants: StoryObj<typeof meta>;
-export declare const Disabled: StoryObj<typeof meta>;
-export declare const Error: StoryObj<typeof meta>;
+export declare const Default: StoryObj<typeof FilterTagInput>;
+export declare const Sizes: StoryObj<typeof FilterTagInput>;
+export declare const Variants: StoryObj<typeof FilterTagInput>;
+export declare const Disabled: StoryObj<typeof FilterTagInput>;
+export declare const Error: StoryObj<typeof FilterTagInput>;