@baton8/general-components 1.0.0

package/dist/components/atoms/fileInput/fileInput.d.ts

@@ -0,0 +1,57 @@
+import { AriaAttributes, ChangeEvent, ReactElement } from "react";
+import { CommonProps } from "../../../modules/data";
+import { GenericFunctionComponent } from "../../../utils/types";
+type FileInputProps<M extends boolean> = CommonProps & AriaAttributes & {
+    /** */
+    value?: FileInputValue<M>;
+    /** */
+    name?: string;
+    /**
+     * サイズ。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium";
+    /**
+     * 複数ファイルを受け付けるかどうか。
+     */
+    multiple?: M;
+    /** */
+    accept?: string;
+    /** */
+    autoFocus?: boolean;
+    /**
+     * バリデーションエラーがあるかどうか。
+     * これが `true` のときは警告表示になります。
+     * @defaultValue `false`
+     */
+    isError?: boolean;
+    /** */
+    isRequired?: boolean;
+    /**
+     * 無効にするかどうか。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean;
+    /** */
+    onSet?: (value: FileInputValue<M>) => unknown;
+    /**
+     * `<input>` 要素の `change` イベントのリスナー。
+     * 入力された値を取得したいだけの場合は、`onSet` prop を利用する方が便利です。
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    /** */
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => unknown;
+    /** */
+    children?: ReactElement | [ReactElement] | [ReactElement, ReactElement];
+    /** */
+    className?: string;
+};
+type FileInputComponent = GenericFunctionComponent<(<M extends boolean>(props: FileInputProps<M>) => ReactElement)>;
+/**
+ * ### ファイル入力欄
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const FileInput: FileInputComponent;
+export type FileInputValue<M extends boolean> = M extends true ? Array<File> : File | null;
+export {};

package/dist/components/atoms/fileInput/fileInput.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { FileInput } from "../../../components";
+type Meta = RawMeta<typeof FileInput>;
+type Story = RawStory<typeof FileInput>;
+declare const meta: Meta;
+export declare const Single: Story;
+export declare const Multiple: Story;
+export declare const TestUncontrolled: Story;
+export declare const TestControlled: Story;
+export default meta;

package/dist/components/atoms/fileInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./fileInput";

package/dist/components/atoms/generalIcon/generalIcon.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+/**
+ * ### Font Awesome のアイコン
+ *
+ * #### 注意
+ * アイコンを表示する際は、まず [`Icon`](/docs/atoms-Icon-Icon--ドキュメント) が利用できるか検討してください。
+ * `Icon` が提供するアイコンに適切なものがない場合にのみ、このコンポーネントを利用してください。
+ *
+ * #### 使い方
+ * まず、[Font Awesome のページ](https://fontawesome.com/search?o=r&s=regular&f=classic)で利用したいアイコンを検索してください。
+ * このとき、アイコンスタイルを統一するために、Sharp Regular スタイルから探すようにしてください。
+ *
+ * 利用したいアイコンが決まったら、アイコン名を UpperCamelCase にしたものの先頭に `fa` を付けた定数を、`@fortawesome/sharp-regular-svg-icons` からインポートしてください。
+ * 例えば、アイコン名が「circle-exclamation」であれば、`faCircleExclamation` をインポートすることになります。
+ *
+ * ```tsx
+ * import {faCircleExclamation} from "@fortawesome/sharp-regular-svg-icons";
+ * ```
+ *
+ * インポートした定数を、このコンポーネントの `icon` prop に渡してください。
+ * これでアイコンが表示できます。
+ *
+ * ```tsx
+ * <GeneralIcon icon={faCircleExclamation}/>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const GeneralIcon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * Font Awesome が提供するアイコンの定義データ。
+     */
+    icon: IconDefinition;
+    /** */
+    label?: string | undefined;
+    /**
+     * アイコンの反転。
+     * @defaultValue `"none"`
+     */
+    flip?: "none" | "both" | "horizontal" | "vertical" | undefined;
+    /**
+     * アイコンの回転角度。
+     * @defaultValue `0`
+     */
+    rotation?: 0 | 90 | 180 | 270 | undefined;
+    /**
+     * アイコンを回転させるかどうか。
+     * @defaultValue `false`
+     */
+    spin?: boolean | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/atoms/generalIcon/generalIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { GeneralIcon } from "../../../components";
+type Meta = RawMeta<typeof GeneralIcon>;
+type Story = RawStory<typeof GeneralIcon>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/generalIcon/index.d.ts

@@ -0,0 +1 @@
+export * from "./generalIcon";

package/dist/components/atoms/heading/heading.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+/**
+ * ### 第 1 見出し
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * 使用する HTML タグの名前。
+     * @defaultValue `"h2"`
+     */
+    as?: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    /** */
+    className?: string | undefined;
+    /** */
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/atoms/heading/heading.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Heading } from "../../../components";
+type Meta = RawMeta<typeof Heading>;
+type Story = RawStory<typeof Heading>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/heading/index.d.ts

@@ -0,0 +1 @@
+export * from "./heading";

package/dist/components/atoms/icon/icon.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { BUILTIN_ICONS } from "./iconData";
+/**
+ * ### アイコン
+ *
+ * #### アイコン一覧
+ * 表示できるアイコンの一覧は[アイコンのリストページ](/docs/design-アイコン--ドキュメント)で見ることができます。
+ *
+ * #### その他のアイコンについて
+ * ここに存在しないアイコンを表示したい場合は [`GeneralIcon`](/docs/atoms-GeneralIcon-GeneralIcon--ドキュメント) も使えます。
+ * ただし、サービス間でアイコンを統一するため、アプリ固有の概念を表すアイコンを表示したい場合のみ `GeneralIcon` を使い、Quizium サービス全体で共通する概念を表すアイコンにはこのコンポーネントを用いてください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * アイコンの名前。
+     */
+    name: keyof typeof BUILTIN_ICONS;
+    /** */
+    label?: string | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/atoms/icon/icon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Icon } from "../../../components";
+type Meta = RawMeta<typeof Icon>;
+type Story = RawStory<typeof Icon>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/icon/iconData.d.ts

@@ -0,0 +1,33 @@
+export declare const BUILTIN_ICONS: {
+    plus: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    minus: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    edit: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    delete: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    search: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    upload: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    copy: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    accept: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    refuse: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    move: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    bulk: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    login: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    logout: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    correct: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    wrong: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    first: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    previous: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    next: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    last: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    caution: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    more: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    less: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    back: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    empty: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    menu: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    grip: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    ellipsis: import("@fortawesome/fontawesome-common-types").IconDefinition;
+};

package/dist/components/atoms/icon/iconDefinitions.d.ts

@@ -0,0 +1,8 @@
+import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+export declare const fakRegularMessageQuestionCirclePlus: IconDefinition;
+export declare const fakRegularNotebookCirclePlus: IconDefinition;
+export declare const fakRegularFolderClosedCirclePlus: IconDefinition;
+export declare const fakRegularTextCirclePlus: IconDefinition;
+export declare const fakRegularImageCirclePlus: IconDefinition;
+export declare const fakRegularTrophyCirclePlus: IconDefinition;
+export declare const fakRegularUserCirclePlus: IconDefinition;

package/dist/components/atoms/icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./icon";

package/dist/components/atoms/iconButton/iconButton.d.ts

@@ -0,0 +1,71 @@
+import { ExtendedKeyboardEvent } from "mousetrap";
+import { AriaAttributes, KeyboardEvent, MouseEvent, ReactElement } from "react";
+/**
+ * ### アイコンボタン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const IconButton: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /**
+     * ラベル。
+     * ここで指定された内容は表示されませんが、アクセシビリティのために `aria-label` プロパティの値として設定されます。
+     */
+    label: string;
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 見た目のバリアント。
+     * - `"solid"` — ボタンの背景が濃い
+     * - `"light"` — ボタンの背景が薄い
+     * - `"outline"` — ボタンの背景が薄い上に罫線が付く
+     * @defaultValue `"solid"`
+     */
+    variant?: "solid" | "light" | undefined;
+    /**
+     * サイズ。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium" | "large" | undefined;
+    /**
+     * ボタンの種類。
+     * HTML と違ってデフォルト値が `"button"` になっているので、フォームの送信ボタンとして使う場合は明示的に `"submit"` を指定してください。
+     * @defaultValue `"button"`
+     */
+    type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * 無効にするかどうか。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean | undefined;
+    /**
+     * ローディング中かどうか。
+     * これが `true` の間は、ボタンがローディング表示され無効になります。
+     * @defaultValue `false`
+     */
+    isLoading?: boolean | undefined;
+    /**
+     * クリックされたりショートカットキーが押されたりしたときに実行する関数。
+     */
+    onClick?: ((event: MouseEvent<HTMLButtonElement> | ExtendedKeyboardEvent) => unknown) | undefined;
+    /** */
+    onKeyDown?: ((event: KeyboardEvent<HTMLButtonElement>) => unknown) | undefined;
+    /** */
+    onKeyUp?: ((event: KeyboardEvent<HTMLButtonElement>) => unknown) | undefined;
+    /** */
+    onMouseDown?: ((event: MouseEvent<HTMLButtonElement>) => unknown) | undefined;
+    /** */
+    onPointerDown?: ((event: MouseEvent<HTMLButtonElement>) => unknown) | undefined;
+    /** */
+    className?: string | undefined;
+    /**
+     * 表示するアイコン。
+     */
+    children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/iconButton/iconButton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { IconButton } from "../../../components";
+type Meta = RawMeta<typeof IconButton>;
+type Story = RawStory<typeof IconButton>;
+declare const meta: Meta;
+export declare const Solid: Story;
+export declare const Outline: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Loading: Story;
+export default meta;

package/dist/components/atoms/iconButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./iconButton";

package/dist/components/atoms/input/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./input";
+export * from "./inputLeftAddon";
+export * from "./inputRightAddon";

package/dist/components/atoms/input/input.d.ts

@@ -0,0 +1,80 @@
+import { AriaAttributes, ChangeEvent, ReactElement } from "react";
+/**
+ * ### テキスト入力欄
+ *
+ * #### 構成
+ * 以下のようなコンポーネント構成で利用してください。
+ * - **`Input`**
+ *   - [`InputLeftAddon`](/docs/atoms-Input-InputLeftAddon--ドキュメント) (任意)
+ *   - [`InputRightAddon`](/docs/atoms-Input-InputRightAddon--ドキュメント) (任意)
+ *
+ * #### 例
+ * 基本的には、以下のように子要素なしで利用します。
+ *
+ * ```tsx
+ * <Input value={value} onSet={setValue}/>
+ * ```
+ *
+ * 子要素に `InputLeftAddon` や `InputRightAddon` を指定することで、テキスト入力できる部分の左右に好きな要素を配置することができます。
+ * 接頭辞やアイコンなどを表示することができます。
+ *
+ * ```tsx
+ * <Input value={value} onSet={setValue}>
+ *   <InputLeftAddon>@</InputLeftAddon>
+ *   <InputRightAddon><Icon name="search"/></InputRightAddon>
+ * </Input>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /** */
+    value?: string | undefined;
+    /** */
+    name?: string | undefined;
+    /**
+     * サイズ。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium" | undefined;
+    /**
+     * @defaultValue `"text"`
+     */
+    type?: "search" | "time" | "month" | "date" | "text" | "tel" | "url" | "email" | "datetime-local" | "week" | undefined;
+    /**
+     * @defaultValue `"off"`
+     */
+    autoComplete?: string | undefined;
+    /** */
+    autoFocus?: boolean | undefined;
+    /**
+     * バリデーションエラーがあるかどうか。
+     * これが `true` のときは警告表示になります。
+     * @defaultValue `false`
+     */
+    isError?: boolean | undefined;
+    /** */
+    isRequired?: boolean | undefined;
+    /**
+     * 無効にするかどうか。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean | undefined;
+    /** */
+    onSet?: ((value: string) => unknown) | undefined;
+    /**
+     * `<input>` 要素の `change` イベントのリスナー。
+     * 入力された値を取得したいだけの場合は、`onSet` prop を利用する方が便利です。
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    onBlur?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | [ReactElement<any, string | import("react").JSXElementConstructor<any>>] | [ReactElement<any, string | import("react").JSXElementConstructor<any>>, ReactElement<any, string | import("react").JSXElementConstructor<any>>] | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/input/input.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Input } from "../../../components";
+type Meta = RawMeta<typeof Input>;
+type Story = RawStory<typeof Input>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export declare const Small: Story;
+export declare const Error: Story;
+export declare const WithLeftIconAddon: Story;
+export declare const WithLeftTextAddon: Story;
+export declare const WithRightTextAddon: Story;
+export declare const TypeDate: Story;
+export declare const TypeTime: Story;
+export declare const TypeDateTime: Story;
+export declare const TypeMonth: Story;
+export declare const TypeWeek: Story;
+export declare const TestUncontrolled: Story;
+export declare const TestControlled: Story;
+export declare const TestHook: Story;
+export default meta;

package/dist/components/atoms/input/inputLeftAddon.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+/**
+ * ### テキスト入力欄の左側のアドオン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const InputLeftAddon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/input/inputRightAddon.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+/**
+ * ### テキスト入力欄の右側のアドオン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const InputRightAddon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/link/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./link";
+export * from "./linkIconContainer";

package/dist/components/atoms/link/link.d.ts

@@ -0,0 +1,79 @@
+import { AriaAttributes, HTMLAttributeAnchorTarget, KeyboardEvent, MouseEvent, ReactNode } from "react";
+/**
+ * ### リンク
+ *
+ * #### Next.js での注意
+ * Next.js を使っている場合は、以下のように `next/link` パッケージが提供するコンポーネントで囲み、`passHref` 属性に `true` を設定してください。
+ * Next.js 13 以降では、さらに `legacyBehavior` 属性に `true` を設定する必要があります。
+ * 詳細は [Next.js のドキュメント](https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next/link)も参照してください。
+ *
+ * ```tsx
+ * import NextLink from "next/link";
+ *
+ * <NextLink href="(リンク先)" passHref={true} legacyBehavior={true}>
+ *   <Link>リンク</Link>
+ * </NextLink>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /**
+     * リンク先の URL。
+     */
+    href?: string | undefined;
+    /** */
+    target?: HTMLAttributeAnchorTarget | undefined;
+    /**
+     * カラースキーム。
+     * `null` を指定した場合は、文字色の設定が行われないので、外側の文字色を継承させることができます。
+     * @defaultValue `"primary"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 見た目のバリアント。
+     * - `"solid"` — ボタン状, ボタンの背景が濃い
+     * - `"light"` — ボタン状, ボタンの背景が薄い
+     * - `"underline"` — テキスト状, ホバー時に下線が付く
+     * - `"simple"` — テキスト状, ホバー時でも下線は付かない
+     * - `"unstyledUnderline"` — スタイルなし, ホバー時に下線が付く
+     * - `"unstyledSimple"` — スタイルなし, ホバー時でも下線は付かない
+     * @defaultValue `"underline"`
+     */
+    variant?: "solid" | "light" | "underline" | "simple" | "unstyledUnderline" | "unstyledSimple" | undefined;
+    /**
+     * 全体のサイズ。
+     *
+     * `variant` の値が `"solid"` か `"light"` の場合にのみ効果があります。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium" | "large" | undefined;
+    /**
+     * 内部の余白を少なくし、全体を少し小さめに表示するかどうか。
+     * 基本的には `false` (デフォルト値) で使うことを推奨しますが、フォームの一部として使う場合など、省スペースで表示したいときには `true` にしてください。
+     *
+     * `variant` の値が `"solid"` か `"light"` の場合にのみ効果があります。
+     * @defaultValue `false`
+     */
+    isCompact?: boolean | undefined;
+    /** */
+    onClick?: ((event: MouseEvent<HTMLAnchorElement>) => unknown) | undefined;
+    /** */
+    onKeyDown?: ((event: KeyboardEvent<HTMLAnchorElement>) => unknown) | undefined;
+    /** */
+    onKeyUp?: ((event: KeyboardEvent<HTMLAnchorElement>) => unknown) | undefined;
+    /** */
+    onMouseDown?: ((event: MouseEvent<HTMLAnchorElement>) => unknown) | undefined;
+    /** */
+    onPointerDown?: ((event: MouseEvent<HTMLAnchorElement>) => unknown) | undefined;
+    /**
+     * 内部に表示する内容。
+     */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/atoms/link/link.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Link } from "../../../components";
+type Meta = RawMeta<typeof Link>;
+type Story = RawStory<typeof Link>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export declare const WithIcon: Story;
+export default meta;

package/dist/components/atoms/link/linkIconContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+/**
+ * ### リンク内のアイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const LinkIconContainer: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/loadingIcon/index.d.ts

@@ -0,0 +1 @@
+export * from "./loadingIcon";

package/dist/components/atoms/loadingIcon/loadingIcon.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/**
+ * ### 読み込み中アイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const LoadingIcon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * カラースキーム。
+     * `null` を指定した場合は、文字色の設定が行われないので、外側の文字色を継承させることができます。
+     * @defaultValue `"gray"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | null | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/atoms/loadingIcon/loadingIcon.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { LoadingIcon } from "../../../components";
+type Meta = RawMeta<typeof LoadingIcon>;
+type Story = RawStory<typeof LoadingIcon>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/modal/index.d.ts

@@ -0,0 +1 @@
+export * from "./modal";