ingred-ui 26.1.0 → 27.0.1

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/Accordion/Accordion.stories.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { AccordionProps } from "./Accordion";
 declare const _default: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { ActionButtonProps } from "./ActionButton";
 declare const _default: {
@@ -8,7 +8,7 @@ declare const _default: {
         color?: ("primary" | "warning") | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
     args: {
-        onClick: import("@storybook/addon-actions").HandlerFunction;
+        onClick: import("storybook/actions").HandlerFunction;
         icon: string;
         children: string;
     };

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

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 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/Backdrop/Backdrop.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { BackdropProps } from "./Backdrop";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import Badge from "./Badge";
 declare const _default: {
     title: string;

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/Banner/Banner.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { BannerProps } from "./types";
 declare const _default: {
     title: 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

@@ -1,11 +1,11 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ButtonProps } from "./Button";
 declare const _default: {
     title: string;
     components: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
     args: {
-        onClick: import("@storybook/addon-actions").HandlerFunction;
+        onClick: import("storybook/actions").HandlerFunction;
     };
     parameters: {
         docs: {
@@ -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/ButtonGroup/ButtonGroup.stories.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ButtonGroupProps } from "./ButtonGroup";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { CalendarProps } from "./Calendar";
 import dayjs from "dayjs";
 declare const _default: {

package/dist/components/Calendar/CalendarRange/CalendarRange.stories.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { CalendarRangeProps } from "./CalendarRange";
 import dayjs from "dayjs";
 declare const _default: {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { CardProps } from "./Card";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { CheckBoxProps, CheckboxSize } from "./Checkbox";
 declare const _default: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ConfirmModalProps } from "./ConfirmModal";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ContextMenuProps } from "./ContextMenu";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ContextMenu2 } from "./index";
 declare const _default: {
     title: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { DataTableProps } from "./DataTable";
 import { data } from "./mockData";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: <T, K extends keyof T>(props: DataTableProps<T, K> & {

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 { StoryObj } from "@storybook/react-vite";
+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/DateField/DateField/DateField.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DateFieldProps } from "./DateField";
 import React from "react";
 declare const _default: {

package/dist/components/DateField/DateRangeField/DateRangeField.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DateRangeFieldProps } from "./DateRangeField";
 import React from "react";
 declare const _default: {

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DatePickerProps } from "./DatePicker";
 import React from "react";
 declare const _default: {

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DateRangePickerProps } from "./DateRangePicker";
 import React from "react";
 declare const _default: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DividerProps } from "./Divider";
 declare const _default: {
     title: string;

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

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 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/DropdownButton/DropdownButton.stories.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { DropdownButtonProps } from "./types";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<DropdownButtonProps>;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DualListBoxProps } from "./DualListBox";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { DualListBox2 } from "./DualListBox2";
 export type Item = {
     id: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { ErrorTextProps } from "./ErrorText";
 declare const _default: {
     title: string;

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import Fade from "./Fade";
 declare const _default: {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import { FileUploaderProps } from "./index";
 declare const _default: {
     title: string;