ingred-ui 26.0.0 → 26.1.0

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

@@ -30,7 +30,7 @@ export declare const SelectLabelIcon: import("styled-components").StyledComponen
 export declare const TagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $tagOverflow?: "wrap" | "truncate" | undefined;
 }, never>;
-export declare const StyledTag: import("styled-components").StyledComponent<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: import("../Tag").TagProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("../Tag").TagProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Placeholder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     $variant?: Select2Props["variant"];
     $disabled?: boolean | undefined;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagProps } from "./types";
-export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: TagProps) => JSX.Element;
+export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: TagProps) => JSX.Element;

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

@@ -2,7 +2,7 @@
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: import("./types").TagProps) => JSX.Element;
+    component: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("./types").TagProps) => JSX.Element;
     argTypes: {};
 };
 export default meta;
@@ -16,3 +16,5 @@ 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;

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

@@ -5,7 +5,14 @@ type StyledTagProps = {
     $disabled?: boolean;
     $clickable?: boolean;
 };
+type PrependSlotProps = {
+    $size: TagSize;
+};
 export declare const Tag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
+export declare const PrependSlot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, PrependSlotProps, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps & {
+    /** 削除ボタンなど後続要素があるとき、itemGap を付与 */
+    $hasTrailing?: boolean | undefined;
+}, never>;
 export declare const RemoveButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTagProps, never>;
 export {};

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export type TagSize = "small" | "medium" | "large";
 export type TagVariant = "light" | "dark";
 export type TagProps = {
@@ -11,28 +12,37 @@ export type TagProps = {
     onClick?: () => void;
     "aria-label"?: string;
     "data-tag"?: string;
+    prepend?: ReactNode;
 };
 export declare const TAG_SIZES: {
     readonly small: {
         readonly height: "20px";
         readonly fontSize: "11px";
-        readonly padding: "2px 6px";
-        readonly iconSize: "14px";
-        readonly borderRadius: "2px";
+        readonly padding: "2px 4px";
+        readonly iconSize: "12px";
+        readonly borderRadius: "4px";
+        /** prepend とラベルテキストの間 */
+        readonly prependGap: "2px";
+        /** ラベルと削除ボタンなど、従来ルート gap で取っていた間隔 */
+        readonly itemGap: "4px";
     };
     readonly medium: {
         readonly height: "22px";
         readonly fontSize: "12px";
-        readonly padding: "2px 7px";
-        readonly iconSize: "16px";
+        readonly padding: "2px 4px";
+        readonly iconSize: "14px";
         readonly borderRadius: "4px";
+        readonly prependGap: "2px";
+        readonly itemGap: "6px";
     };
     readonly large: {
         readonly height: "26px";
         readonly fontSize: "13px";
-        readonly padding: "3px 8px";
-        readonly iconSize: "18px";
+        readonly padding: "4px 6px";
+        readonly iconSize: "16px";
         readonly borderRadius: "4px";
+        readonly prependGap: "4px";
+        readonly itemGap: "8px";
     };
 };
 export declare const TAG_VARIANTS: {