ingred-ui 28.1.0 → 28.2.0

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

@@ -53,7 +53,7 @@ declare const _default: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        inputMode?: "text" | "search" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+        inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -98,7 +98,7 @@ declare const _default: {
         'aria-rowspan'?: number | undefined;
         'aria-selected'?: (boolean | "true" | "false") | undefined;
         'aria-setsize'?: number | undefined;
-        'aria-sort'?: "other" | "none" | "ascending" | "descending" | undefined;
+        'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
         'aria-valuemax'?: number | undefined;
         'aria-valuemin'?: number | undefined;
         'aria-valuenow'?: number | undefined;

package/dist/components/CheckboxCard/CheckboxCard.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<import("../Checkbox").CheckBoxProps, "slot" | "children"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    slotContent?: React.ReactNode;
+    slotExpansion?: import("..").SlotExpansion | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default CheckboxCard;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("..").CheckBoxProps, "slot" | "children"> & {
+        title: React.ReactNode;
+        description?: React.ReactNode;
+        slotContent?: React.ReactNode;
+        slotExpansion?: import("..").SlotExpansion | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        checked: {
+            control: {
+                type: string;
+            };
+        };
+        indeterminate: {
+            control: {
+                type: string;
+            };
+        };
+        slotExpansion: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+/** 上からシンプル→複雑（各ブロック独立した state） */
+export declare const Showcase: StoryObj;
+/** 未チェックのときだけスロット内容を disabled にする例（slot は always で常時表示） */
+export declare const SlotInputsDependOnChecked: StoryObj;

package/dist/components/CheckboxCard/__tests__/CheckboxCard.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/CheckboxCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CheckboxCard";
+export type { CheckboxCardProps } from "./types";

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { CheckBoxProps } from "../Checkbox";
+import type { SlotExpansion } from "../SelectableCard/types";
+export type CheckboxCardProps = Omit<CheckBoxProps, "children" | "slot"> & {
+    title: ReactNode;
+    description?: ReactNode;
+    slotContent?: ReactNode;
+    slotExpansion?: SlotExpansion;
+};

package/dist/components/IconText/IconText.d.ts

@@ -0,0 +1,25 @@
+import { type AnchorHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type IconTextSize, type IconTextPos } from "./types";
+export type IconTextProps = {
+    /** 単体アイコンのとき（`prependIcon`/`appendIcon` 未指定時）。 */
+    icon?: ReactElement;
+    size?: IconTextSize;
+    /** 単体 `icon` の配置。両端アイコン指定時は無視される。 */
+    pos?: IconTextPos;
+    /** テキスト左側のアイコン。`appendIcon` と同時指定可。その場合 `icon` / `pos` は無視。 */
+    prependIcon?: ReactElement;
+    /** テキスト右側のアイコン。同上。 */
+    appendIcon?: ReactElement;
+    /**
+     * テキストとアイコンの共通デフォルト色（CSS カラー）。
+     * 非リンク時: 省略時は黒。`iconColor` / `textColor` で個別上書き可。
+     * リンク時: 共通色には使わず（プライマリが既定）。個別指定は `iconColor` / `textColor`。
+     */
+    color?: string;
+    /** アイコン色のみ指定。省略時は `color`（非リンク）またはプライマリ（リンク）にフォールバック */
+    iconColor?: string;
+    /** テキスト色のみ指定。省略時は `color`（非リンク）またはプライマリ（リンク）にフォールバック */
+    textColor?: string;
+    children: ReactNode;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">;
+export declare const IconText: ({ icon, size, pos, prependIcon, appendIcon, color, iconColor, textColor, children, ...rest }: IconTextProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StoryObj } from "@storybook/react-vite";
+declare const meta: Meta<({ icon, size, pos, prependIcon, appendIcon, color, iconColor, textColor, children, ...rest }: import("./IconText").IconTextProps) => JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Positions: Story;
+export declare const DualIcons: Story;
+export declare const Colors: Story;

package/dist/components/IconText/__tests__/IconText.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/IconText/index.d.ts

@@ -0,0 +1,3 @@
+export { IconText } from "./IconText";
+export type { IconTextProps } from "./IconText";
+export type { IconTextSize, IconTextPos } from "./types";

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

@@ -0,0 +1,11 @@
+import { IconTextSize } from "./types";
+type StyledIconTextProps = {
+    $size: IconTextSize;
+    $isLink: boolean;
+};
+/** 先に定義し、Container の hover で参照して下線色をテキストの color と揃える */
+export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $color: string;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, StyledIconTextProps, never>;
+export {};

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

@@ -0,0 +1,25 @@
+export type IconTextSize = "xs" | "small" | "medium" | "large";
+export type IconTextPos = "prepend" | "append";
+/** Figma Icon text と対応（xs〜large） */
+export declare const ICON_TEXT_SIZES: {
+    readonly xs: {
+        readonly iconSize: 14;
+        readonly fontSize: 12;
+        readonly gap: "2px";
+    };
+    readonly small: {
+        readonly iconSize: 16;
+        readonly fontSize: 13;
+        readonly gap: "4px";
+    };
+    readonly medium: {
+        readonly iconSize: 18;
+        readonly fontSize: 14;
+        readonly gap: "6px";
+    };
+    readonly large: {
+        readonly iconSize: 20;
+        readonly fontSize: 16;
+        readonly gap: "6px";
+    };
+};

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const RadioCard: React.ForwardRefExoticComponent<Omit<import("../RadioButton").RadioButtonProps, "slot" | "children"> & {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    slotContent?: React.ReactNode;
+    slotExpansion?: import("./types").SlotExpansion | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default RadioCard;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("..").RadioButtonProps, "slot" | "children"> & {
+        title: React.ReactNode;
+        description?: React.ReactNode;
+        slotContent?: React.ReactNode;
+        slotExpansion?: import("..").SlotExpansion | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        checked: {
+            control: {
+                type: string;
+            };
+        };
+        slotExpansion: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+/** 上からシンプル→複雑（各ブロック独立した state） */
+export declare const Showcase: StoryObj;
+/** 未選択のときだけスロット内容を disabled にする例（slot は always で常時表示） */
+export declare const SlotInputsDependOnChecked: StoryObj;

package/dist/components/RadioCard/__tests__/RadioCard.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/RadioCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./RadioCard";
+export type { RadioCardProps, SlotExpansion } from "./types";

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { RadioButtonProps } from "../RadioButton";
+import type { SlotExpansion } from "../SelectableCard/types";
+export type { SlotExpansion };
+export type RadioCardProps = Omit<RadioButtonProps, "children" | "slot"> & {
+    title: ReactNode;
+    description?: ReactNode;
+    slotContent?: ReactNode;
+    slotExpansion?: SlotExpansion;
+};

package/dist/components/SelectableCard/SelectableCardLayout.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { SelectableCardLayoutProps } from "./types";
+declare const SelectableCardLayout: React.ForwardRefExoticComponent<SelectableCardLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectableCardLayout;

package/dist/components/SelectableCard/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+export declare const Root: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $checked: boolean;
+    $disabled: boolean;
+}, never>;
+export declare const HeaderRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $checked: boolean;
+    $disabled: boolean;
+    $clickable?: boolean | undefined;
+}, never>;
+/** grid 0fr/1fr でスロット開閉をアニメーション */
+export declare const SlotExpandWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $open: boolean;
+}, never>;
+export declare const SlotOverflow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Slot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $checked: boolean;
+    $disabled: boolean;
+}, never>;
+/** For click-boundary checks only; does not generate a box (no extra height vs bare span). */
+export declare const ControlWrap: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderControlRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CardDescription: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $disabled?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type SlotExpansion = "whenChecked" | "always";
+export type SelectableCardLayoutProps = {
+    checked: boolean;
+    disabled?: boolean;
+    header: React.ReactNode;
+    /** ヘッダー領域全体のクリック（コントロール外からの選択用） */
+    onHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    slot?: React.ReactNode;
+    slotExpansion?: SlotExpansion;
+};

package/dist/components/SelectableCard/useSelectableCardHeaderClick.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * ヘッダー領域クリックで input をトグルするための ref・ハンドラ。
+ * コントロール本体（ラベル内）のクリックと二重発火しないよう ControlWrap + contains で抑止する。
+ */
+export declare function useSelectableCardHeaderClick(disabled: boolean | undefined, inputRefProp: React.Ref<HTMLInputElement> | undefined): {
+    controlWrapRef: React.MutableRefObject<HTMLSpanElement | null>;
+    assignInputRef: (node: HTMLInputElement | null) => void;
+    handleHeaderClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+};

package/dist/components/SelectableCard/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare function hasRenderableDescription(description?: ReactNode): boolean;

package/dist/components/index.d.ts

@@ -19,6 +19,8 @@ export { default as Card } from "./Card";
 export * from "./Card";
 export { default as Checkbox } from "./Checkbox";
 export * from "./Checkbox";
+export { default as CheckboxCard } from "./CheckboxCard";
+export * from "./CheckboxCard";
 export { default as ClickAwayListener } from "./ClickAwayListener";
 export * from "./ClickAwayListener";
 export { default as ConfirmModal } from "./ConfirmModal";
@@ -67,6 +69,7 @@ export { default as Grow } from "./Grow";
 export * from "./Grow";
 export { default as Icon } from "./Icon";
 export * from "./Icon";
+export * from "./IconText";
 export { default as Input } from "./Input";
 export * from "./Input";
 export { default as ItemEmpty } from "./ItemEmpty";
@@ -97,6 +100,8 @@ export { default as Popover } from "./Popover";
 export * from "./Popover";
 export { default as Portal } from "./Portal";
 export * from "./Portal";
+export { default as RadioCard } from "./RadioCard";
+export * from "./RadioCard";
 export { default as RadioButton } from "./RadioButton";
 export * from "./RadioButton";
 export { default as ScrollArea } from "./ScrollArea";