ingred-ui 27.4.4 → 28.1.0

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

@@ -44,6 +44,13 @@ type baseProps = {
     icon?: React.ReactNode;
     size?: ButtonSize;
     onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    /**
+     * `true` のときボーダーとシャドウ（通常・ホバー・アクティブ）を付けず、視覚的に抑えた見た目にする。
+     * 補足的なヒントやヘルプのトリガーなど、目立たせすぎない操作向け。**アイコン単体**（`icon` のみ）での利用を想定。
+     * `color` は **`secondaryLight` / `secondaryDark` を主に使う**想定（それ以外は用途に応じて）。
+     * `:active` は押し込み（位置ずれ）やシャドウの変化はせず、背景のみホバーより一段暗い色に変える。
+     */
+    isQuiet?: boolean;
     /**
      * ローディング状態を表示するかどうか。文字列を指定した場合はそれがローディングテキストとして使用されます。
      * - `true`: デフォルトの"Loading..."テキストを使用

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

@@ -7,6 +7,12 @@ declare const _default: {
     args: {
         onClick: any;
     };
+    argTypes: {
+        isQuiet: {
+            control: string;
+            description: string;
+        };
+    };
     parameters: {
         docs: {
             source: {
@@ -23,6 +29,7 @@ export declare const Danger: StoryObj<ButtonProps>;
 export declare const Clear: StoryObj<ButtonProps>;
 export declare const SecondaryDark: StoryObj<ButtonProps>;
 export declare const PrimarySubtle: StoryObj<ButtonProps>;
+export declare const IsQuiet: StoryObj<ButtonProps>;
 export declare const Small: StoryObj<ButtonProps>;
 export declare const Medium: StoryObj<ButtonProps>;
 export declare const Large: StoryObj<ButtonProps>;

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

@@ -8,6 +8,8 @@ export type ContainerProps = ButtonColorStyle & {
     height: string;
     href?: string;
     disabled?: boolean;
+    /** ボーダー・シャドウなしの抑えたスタイル（disabled 時の見た目調整にも使用） */
+    $isQuiet?: boolean;
 };
 export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $textColor?: string | undefined;
@@ -21,6 +23,8 @@ export declare const ButtonContainer: import("styled-components").StyledComponen
     height: string;
     href?: string | undefined;
     disabled?: boolean | undefined;
+    /** ボーダー・シャドウなしの抑えたスタイル（disabled 時の見た目調整にも使用） */
+    $isQuiet?: boolean | undefined;
 } & {
     size: ButtonSize;
 }, never>;

package/dist/components/Calendar/internal/Actions/styled.d.ts

@@ -4,6 +4,8 @@ export declare const PresetButton: import("styled-components").StyledComponent<"
 export declare const ActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PresetButtonsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DateFieldWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/** 日付＋時刻を横並びにしつつ、狭い幅では折り返してはみ出しを防ぐ */
+export declare const DateFieldRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 /** 開始/終了など複数ブロックを、幅に応じて横並び〜折り返し（常に左詰め・伸長なし） */
 export declare const DateFieldsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DateFieldLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,26 @@
+/**
+ * Checkbox ::before 用 background-image の data URL（SVG base64）。
+ * Checkbox / CheckboxSize には依存しない（循環参照回避）。
+ */
+export declare const CHECKBOX_MARK_DATA_URLS: {
+    readonly enabled: {
+        readonly minus: {
+            readonly small: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIHJ4PSIwLjMiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')";
+            readonly medium: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDEwIDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuODk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgcng9IjAuMyIgZmlsbD0id2hpdGUiLz4gPC9zdmc+')";
+        };
+        readonly check: {
+            readonly small: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTMuOTQyMzQgNy4yMzA0QzMuODQwNjkgNy4zMzIwNSAzLjY3NTg3IDcuMzMyMDUgMy41NzQyMiA3LjIzMDRMMC40NzcxMTkgNC4xMzMzQzAuMzc1NDY1IDQuMDMxNjUgMC4zNzU0NjUgMy44NjY4NCAwLjQ3NzExOSAzLjc2NTE4TDEuNDYwMDMgMi43ODIyN0MxLjU2MTY5IDIuNjgwNjEgMS43MjY1IDIuNjgwNjEgMS44MjgxNiAyLjc4MjI3TDQuOTI1MzEgNS44Nzk0MkM1LjAyNjk3IDUuOTgxMDggNS4wMjY5NyA2LjE0NTg5IDQuOTI1MzEgNi4yNDc1NUwzLjk0MjM0IDcuMjMwNFoiIGZpbGw9IndoaXRlIi8+IDwvc3ZnPg==')";
+            readonly medium: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTQuOTI2NzkgOC4yOTE3NkM0LjgwOTYzIDguNDA4OTEgNC42MTk2OCA4LjQwODkxIDQuNTAyNTIgOC4yOTE3NkwwLjkzMzA4MyA0LjcyMzJDMC44MTU5MjYgNC42MDUxNiAwLjgxNTkyNiA0LjQxNTIxIDAuOTMzMDgzIDQuMjk4MDVMMi4wNjU5IDMuMTY1MjNDMi4xODMwNiAzLjA0ODA3IDIuMzczMDEgMy4wNDgwNyAyLjQ5MDE3IDMuMTY1MjNMNi4wNTk2OCA2LjczNDc0QzYuMTc2ODQgNi44NTE5IDYuMTc2ODQgNy4wNDE4NSA2LjA1OTY4IDcuMTU5MDFMNC45MjY3OSA4LjI5MTc2WiIgZmlsbD0id2hpdGUiLz4gPC9zdmc+')";
+        };
+    };
+    readonly disabled: {
+        readonly minus: {
+            readonly small: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHg9IjAuNDU4OTg0IiB5PSIwLjUiIHdpZHRoPSI5LjA4MjUyIiBoZWlnaHQ9IjIuMDAwMDIiIHJ4PSIwLjMiIGZpbGw9IiNCM0JBQzEiLz4gPC9zdmc+')";
+            readonly medium: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDEwIDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxyZWN0IHk9IjAuMzk4OTI2IiB3aWR0aD0iMTAiIGhlaWdodD0iMi4yMDIwNSIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')";
+        };
+        readonly check: {
+            readonly small: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0yLjU5MTMgNi4yNDc0OUMyLjQ4OTY1IDYuMTQ1ODMgMi40ODk2NSA1Ljk4MTAyIDIuNTkxMyA1Ljg3OTM2TDguMzU4NTQgMC4xMTIxMjlDOC40NjAxOSAwLjAxMDQ3NTMgOC42MjUwMSAwLjAxMDQ3NTEgOC43MjY2NiAwLjExMjEyOUw5LjcwOTU4IDEuMDk1MDRDOS44MTEyMyAxLjE5NjcgOS44MTEyMyAxLjM2MTUxIDkuNzA5NTggMS40NjMxN0wzLjk0MjM0IDcuMjMwNEMzLjg0MDY5IDcuMzMyMDUgMy42NzU4NyA3LjMzMjA1IDMuNTc0MjIgNy4yMzA0TDIuNTkxMyA2LjI0NzQ5WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNMy45NDIzNCA3LjIzMDRDMy44NDA2OSA3LjMzMjA1IDMuNjc1ODcgNy4zMzIwNSAzLjU3NDIyIDcuMjMwNEwwLjQ3NzExOSA0LjEzMzNDMC4zNzU0NjUgNC4wMzE2NSAwLjM3NTQ2NSAzLjg2Njg0IDAuNDc3MTE5IDMuNzY1MThMMS40NjAwMyAyLjc4MjI3QzEuNTYxNjkgMi42ODA2MSAxLjcyNjUgMi42ODA2MSAxLjgyODE2IDIuNzgyMjdMNC45MjUzMSA1Ljg3OTQyQzUuMDI2OTcgNS45ODEwOCA1LjAyNjk3IDYuMTQ1ODkgNC45MjUzMSA2LjI0NzU1TDMuOTQyMzQgNy4yMzA0WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')";
+            readonly medium: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0zLjM2OTcgNy4xNTg5NEMzLjI1MjU1IDcuMDQxNzggMy4yNTI1NSA2Ljg1MTgzIDMuMzY5NyA2LjczNDY3TDEwLjAxNjUgMC4wODc4NjgxQzEwLjEzMzcgLTAuMDI5Mjg5MiAxMC4zMjM2IC0wLjAyOTI4OTQgMTAuNDQwOCAwLjA4Nzg2NzlMMTEuNTczNiAxLjIyMDY5QzExLjY5MDcgMS4zMzc4NSAxMS42OTA3IDEuNTI3OCAxMS41NzM2IDEuNjQ0OTVMNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDMuMzY5NyA3LjE1ODk0WiIgZmlsbD0iI0IzQkFDMSIvPiA8cGF0aCBkPSJNNC45MjY3OSA4LjI5MTc2QzQuODA5NjMgOC40MDg5MSA0LjYxOTY4IDguNDA4OTEgNC41MDI1MiA4LjI5MTc2TDAuOTMzMDgzIDQuNzIyMzJDMC44MTU5MjYgNC42MDUxNiAwLjgxNTkyNiA0LjQxNTIxIDAuOTMzMDgzIDQuMjk4MDVMMi4wNjU5IDMuMTY1MjNDMi4xODMwNiAzLjA0ODA3IDIuMzczMDEgMy4wNDgwNyAyLjQ5MDE3IDMuMTY1MjNMNi4wNTk2OCA2LjczNDc0QzYuMTc2ODQgNi44NTE5IDYuMTc2ODQgNy4wNDE4NSA2LjA1OTY4IDcuMTU5MDFMNC45MjY3OSA4LjI5MTc2WiIgZmlsbD0iI0IzQkFDMSIvPiA8L3N2Zz4=')";
+        };
+    };
+};

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

@@ -1,17 +1,18 @@
-/// <reference types="react" />
+import React from "react";
 import { StoryObj } from "@storybook/react-vite";
 import { Tag } from "./Tag";
 declare const meta: Meta<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("./types").TagProps) => JSX.Element>;
 export default meta;
 type Story = StoryObj<typeof Tag>;
-export declare const Default: Story;
-export declare const Sizes: Story;
-export declare const Variants: Story;
-export declare const WithoutRemove: Story;
-export declare const Disabled: Story;
-export declare const BoldText: Story;
-export declare const Clickable: Story;
-export declare const BoldAndClickable: Story;
-export declare const AllFeatures: Story;
-export declare const PrependSizes: Story;
-export declare const PrependWithClickable: Story;
+/** Storybook Playground 用（prepend / onRemove は show* で組み立て） */
+type TagPlaygroundArgs = Omit<React.ComponentProps<typeof Tag>, "prepend" | "onRemove"> & {
+    showPrepend?: boolean;
+    showRemove?: boolean;
+};
+/** Controls で主要 props を試す（既定の確認用） */
+export declare const Playground: StoryObj<TagPlaygroundArgs>;
+/**
+ * サイズ・variant・状態・prepend・bold・複合までを1画面で比較する。
+ * （静的表示のため Controls は無効）
+ */
+export declare const Overview: Story;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-export type TagSize = "small" | "medium" | "large";
+export type TagSize = "small" | "medium" | "large" | "xl";
 export type TagVariant = "light" | "dark";
 export type TagProps = {
     label: string;
@@ -21,9 +21,7 @@ export declare const TAG_SIZES: {
         readonly padding: "2px 4px";
         readonly iconSize: "12px";
         readonly borderRadius: "4px";
-        /** prepend とラベルテキストの間 */
         readonly prependGap: "2px";
-        /** ラベルと削除ボタンなど、従来ルート gap で取っていた間隔 */
         readonly itemGap: "4px";
     };
     readonly medium: {
@@ -44,6 +42,15 @@ export declare const TAG_SIZES: {
         readonly prependGap: "4px";
         readonly itemGap: "8px";
     };
+    readonly xl: {
+        readonly height: "30px";
+        readonly fontSize: "14px";
+        readonly padding: "4px 8px";
+        readonly iconSize: "16px";
+        readonly borderRadius: "4px";
+        readonly prependGap: "4px";
+        readonly itemGap: "8px";
+    };
 };
 export declare const TAG_VARIANTS: {
     readonly light: {