ingred-ui 23.2.2 → 23.3.0

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

@@ -1,12 +1,4 @@
 import * as React from "react";
-import * as Styled from "./styled";
-export type BadgeColor = "primary" | "secondary" | "success" | "warning" | "danger" | "basic";
-export type BadgeProps = React.ComponentPropsWithoutRef<"a" | "span"> & {
-    color: BadgeColor;
-    type?: Styled.BadgeType;
-    fontSize?: string;
-    fontWeight?: string;
-    component?: "span" | "a";
-};
+import { BadgeProps } from "./types";
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
 export default Badge;

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

@@ -3,20 +3,37 @@ import { StoryObj } from "@storybook/react";
 import Badge from "./Badge";
 declare const _default: {
     title: string;
-    components: React.ForwardRefExoticComponent<import("./Badge").BadgeProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
+    components: React.ForwardRefExoticComponent<import("./types").BadgeProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
     parameters: {
         docs: {
             source: {
                 language: string;
             };
             page: () => JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
         };
     };
 };
 export default _default;
-export declare const Primary: StoryObj<typeof Badge>;
-export declare const Secondary: StoryObj<typeof Badge>;
-export declare const Success: StoryObj<typeof Badge>;
-export declare const Warning: StoryObj<typeof Badge>;
-export declare const Danger: StoryObj<typeof Badge>;
-export declare const Basic: StoryObj<typeof Badge>;
+export declare const Normal: StoryObj<typeof Badge>;
+export declare const NormalWithIcon: StoryObj<typeof Badge>;
+export declare const Pill: StoryObj<typeof Badge>;
+export declare const Signal: StoryObj<typeof Badge>;
+export declare const SizesComparison: StoryObj<typeof Badge>;
+export declare const ColorVariations: StoryObj<typeof Badge>;

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

@@ -1,2 +1,2 @@
 export { default } from "./Badge";
-export type { BadgeProps } from "./Badge";
+export type { BadgeProps, BadgeColor, BadgeType, BadgeSize } from "./types";

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

@@ -1,10 +1,25 @@
-export type BadgeType = "normal" | "pill";
-type Props = {
+import { BadgeSize } from "./types";
+export declare const NormalBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     color: string;
     backgroundColor: string;
-    type: BadgeType;
-    fontSize: string;
-    fontWeight: string;
-};
-export declare const Container: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Props, never>;
-export {};
+    size?: BadgeSize | undefined;
+    fontSize?: string | undefined;
+    fontWeight?: string | undefined;
+}, never>;
+export declare const PillBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    color: string;
+    backgroundColor: string;
+    size?: BadgeSize | undefined;
+    fontSize?: string | undefined;
+    fontWeight?: string | undefined;
+}, never>;
+export declare const SignalWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    size?: BadgeSize | undefined;
+    fontSize?: string | undefined;
+    fontWeight?: string | undefined;
+}, never>;
+export declare const SignalDot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    backgroundColor: string;
+    size?: BadgeSize | undefined;
+}, never>;
+export declare const Icon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,118 @@
+import React from "react";
+import { Theme } from "../../themes";
+export type BadgeColor = "primary" | "secondary" | "success" | "warning" | "danger" | "basic";
+export type BadgeType = "normal" | "pill" | "signal";
+export type BadgeSize = "medium" | "small";
+export declare const BADGE_SIZE: {
+    small: {
+        iconSize: number;
+        height: string;
+        pillHeight: string;
+        gap: string;
+        padding: (theme: Theme) => string;
+        signalPadding: (theme: Theme) => string;
+        signalGap: (theme: Theme) => string;
+        dotSize: string;
+        fontSize: string;
+    };
+    medium: {
+        iconSize: number;
+        height: string;
+        pillHeight: string;
+        gap: string;
+        padding: (theme: Theme) => string;
+        signalPadding: (theme: Theme) => string;
+        signalGap: (theme: Theme) => string;
+        dotSize: string;
+        fontSize: string;
+    };
+};
+export declare const BACKGROUND_COLOR_MAP: {
+    normal: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+    pill: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+    signal: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+};
+export declare const TEXT_COLOR_MAP: {
+    normal: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+    pill: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+    signal: {
+        primary: (theme: Theme) => string;
+        secondary: (theme: Theme) => string;
+        success: (theme: Theme) => string;
+        warning: (theme: Theme) => string;
+        danger: (theme: Theme) => string;
+        basic: (theme: Theme) => string;
+    };
+};
+export declare const getBackgroundColor: (key: BadgeColor, theme: Theme, type: BadgeType) => string;
+export declare const getTextColor: (key: BadgeColor, theme: Theme, type: BadgeType) => string;
+export type BadgeProps = React.ComponentPropsWithoutRef<"a" | "span"> & {
+    /**
+     * バッジの色
+     */
+    color: BadgeColor;
+    /**
+     * バッジのタイプ
+     * @default "normal"
+     */
+    type?: BadgeType;
+    /**
+     * フォントサイズ
+     * @default "13px"
+     */
+    fontSize?: string;
+    /**
+     * フォントの太さ
+     * @default "normal"
+     */
+    fontWeight?: string;
+    /**
+     * 使用するHTML要素
+     * @default "span"
+     */
+    component?: "span" | "a";
+    /**
+     * バッジのサイズ
+     * @default "medium"
+     */
+    size?: BadgeSize;
+    /**
+     * アイコン要素
+     */
+    icon?: React.ReactNode;
+};

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const Banner: React.ForwardRefExoticComponent<{
+    type?: import("./types").BannerType | undefined;
+    size?: import("./types").BannerSize | undefined;
+    message?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string | undefined;
+    onClose?: (() => void) | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export default Banner;

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

@@ -0,0 +1,79 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { BannerProps } from "./types";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        type?: import("./types").BannerType | undefined;
+        size?: import("./types").BannerSize | undefined;
+        message?: React.ReactNode;
+        children?: React.ReactNode;
+        className?: string | undefined;
+        onClose?: (() => void) | undefined;
+    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        type: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        message: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        children: {
+            description: string;
+        };
+        className: {
+            description: string;
+        };
+        onClose: {
+            description: string;
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Info: StoryObj<BannerProps>;
+export declare const Warning: StoryObj<BannerProps>;
+export declare const Error: StoryObj<BannerProps>;
+export declare const Small: StoryObj<BannerProps>;
+export declare const Medium: StoryObj<BannerProps>;
+export declare const ClosableDemo: StoryObj<BannerProps>;
+export declare const WithImage: StoryObj<BannerProps>;
+export declare const RichContent: StoryObj<BannerProps>;
+export declare const AllVariants: StoryObj;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./Banner";
+export type { BannerProps, BannerType, BannerSize } from "./types";

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

@@ -0,0 +1,12 @@
+import { BannerType, BannerSize } from "./types";
+type ContainerProps = {
+    type: BannerType;
+    size: BannerSize;
+};
+type ContentWrapperProps = {
+    size: BannerSize;
+};
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContentWrapperProps, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export {};

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+/**
+ * バナーのタイプを定義します
+ * info: 情報提供用
+ * warning: 警告用
+ * error: エラー用
+ */
+export type BannerType = "info" | "warning" | "error";
+/**
+ * バナーのサイズを定義します
+ * small: 小さいサイズ
+ * medium: 中サイズ（デフォルト）
+ */
+export type BannerSize = "small" | "medium";
+export type BannerProps = {
+    /**
+     * バナーのタイプ
+     * @default "info"
+     */
+    type?: BannerType;
+    /**
+     * バナーのサイズ
+     * @default "medium"
+     */
+    size?: BannerSize;
+    /**
+     * バナーに表示するメッセージ（childrenと併用する場合はこちらが優先されます）
+     */
+    message?: React.ReactNode;
+    /**
+     * バナーの内容（messageと併用する場合はmessageが優先されます）
+     */
+    children?: React.ReactNode;
+    /**
+     * 追加のCSSクラス
+     */
+    className?: string;
+    /**
+     * 閉じるボタンがクリックされたときのコールバック関数
+     */
+    onClose?: () => void;
+} & React.HTMLAttributes<HTMLDivElement>;

package/dist/components/Input/Input.d.ts

@@ -1,10 +1,45 @@
 import * as React from "react";
 import { Property } from "csstype";
+import { InputSize, InputVariant } from "./types";
 export type InputProps = (React.ComponentPropsWithoutRef<"input"> | React.ComponentPropsWithoutRef<"textarea">) & {
+    /**
+     * 入力タイプ
+     */
     type?: string;
+    /**
+     * エラー状態
+     * @default false
+     */
     error?: boolean;
+    /**
+     * マルチライン入力（テキストエリア）
+     * @default false
+     */
     multiline?: boolean;
+    /**
+     * テキストエリアのリサイズ設定
+     * @default "both"
+     */
     resize?: Property.Resize;
+    /**
+     * コンポーネントのサイズ
+     * @default "medium"
+     */
+    size?: InputSize;
+    /**
+     * コンポーネントのバリアント
+     * @default "light"
+     */
+    variant?: InputVariant;
+    /**
+     * 幅を親要素に合わせる
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * エラーメッセージ（アクセシビリティ用）
+     */
+    errorMessage?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export default Input;

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

@@ -7,8 +7,17 @@ declare const _default: {
     args: {
         placeholder: string;
     };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 export declare const Example: StoryObj<InputProps>;
+export declare const Sizes: StoryObj<InputProps>;
+export declare const Variants: StoryObj<InputProps>;
+export declare const FullWidth: StoryObj<InputProps>;
 export declare const Textarea: StoryObj<InputProps>;
-export declare const DesignSamples: StoryObj<InputProps>;

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

@@ -1,2 +1,3 @@
 export { default } from "./Input";
 export type { InputProps } from "./Input";
+export type { InputSize, InputVariant, InputSizeConfig, InputVariantConfig, } from "./types";

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

@@ -1,5 +1,12 @@
+/// <reference types="react" />
+import { InputSize, InputVariant } from "./types";
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    isError: boolean;
+    $error: boolean;
     width?: string | number | undefined;
     resize?: string | undefined;
+    $size?: InputSize | undefined;
+    $variant?: InputVariant | undefined;
+    $fullWidth?: boolean | undefined;
+    $isFocused?: boolean | undefined;
+    as?: string | import("react").ComponentType<any> | undefined;
 }, never>;

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

@@ -0,0 +1,23 @@
+import { Theme } from "../../themes";
+export type InputSize = "small" | "medium" | "large";
+export type InputVariant = "light" | "dark";
+export type InputSizeConfig = {
+    height: string;
+    fontSize: string;
+    padding: string;
+    borderRadius: string;
+};
+export declare const TEXTAREA_PADDING = "8px";
+export declare const INPUT_SIZES: Record<InputSize, InputSizeConfig>;
+export type InputVariantConfig = {
+    background: string;
+    borderColor: string;
+    hoverBorderColor: string;
+    focusBorderColor: string;
+    focusShadowColor: string;
+};
+export declare const getInputVariantConfig: (theme: Theme) => Record<InputVariant, InputVariantConfig>;
+export declare const getErrorStyles: (theme: Theme) => {
+    borderColor: string;
+    shadowColor: string;
+};

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export { default as Backdrop } from "./Backdrop";
 export * from "./Backdrop";
 export { default as Badge } from "./Badge";
 export * from "./Badge";
+export { default as Banner } from "./Banner";
+export * from "./Banner";
 export { default as Button } from "./Button";
 export * from "./Button";
 export { default as ButtonGroup } from "./ButtonGroup";