@baton8/general-components 1.0.0

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

@@ -0,0 +1,79 @@
+import { AriaAttributes, ReactNode } from "react";
+import { KeyboardEvent, MouseEvent } from "react";
+/**
+ * ### ボタン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 見た目のバリアント。
+     * - `"solid"` — ボタン状, ボタンの背景が濃い
+     * - `"light"` — ボタン状, ボタンの背景が薄い
+     * - `"underline"` — テキスト状, ホバー時に下線が付く
+     * - `"simple"` — テキスト状, ホバー時でも下線は付かない
+     * - `"unstyledUnderline"` — スタイルなし, ホバー時に下線が付く
+     * - `"unstyledSimple"` — スタイルなし, ホバー時でも下線は付かない
+     * @defaultValue `"solid"`
+     */
+    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;
+    /**
+     * ボタンの種類。
+     * 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>) => 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;
+    /**
+     * ボタンの内部に表示する内容。
+     */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,13 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Button } from "../../../components";
+type Meta = RawMeta<typeof Button>;
+type Story = RawStory<typeof Button>;
+declare const meta: Meta;
+export declare const Solid: Story;
+export declare const Light: Story;
+export declare const SizeSmall: Story;
+export declare const SizeLarge: Story;
+export declare const Compact: Story;
+export declare const WithIcon: Story;
+export declare const Loading: Story;
+export default meta;

package/dist/components/atoms/button/buttonIconContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+/**
+ * ### ボタン内のアイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ButtonIconContainer: 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/button/hotkeyView.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from "react";
+interface Props {
+    hotkeys: string | Array<string>;
+}
+export declare const HotkeyView: FunctionComponent<Props>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./buttonIconContainer";

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

@@ -0,0 +1,83 @@
+import { AriaAttributes, HTMLAttributeAnchorTarget, ReactNode } from "react";
+import { KeyboardEvent, MouseEvent } 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}>
+ *   <ButtonLink>リンク</ButtonLink>
+ * </NextLink>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ButtonLink: 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;
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    colorScheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 見た目のバリアント。
+     * - `"solid"` — ボタンの背景が濃い
+     * - `"outline"` — ボタンの背景が薄い上に罫線が付く
+     * @defaultValue `"solid"`
+     */
+    variant?: "outline" | "solid" | undefined;
+    /**
+     * 全体のサイズ。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium" | "large" | undefined;
+    /**
+     * 内部の余白を少なくし、全体を少し小さめに表示するかどうか。
+     * 基本的には `false` (デフォルト値) で使うことを推奨しますが、フォームの一部として使う場合など、省スペースで表示したいときには `true` にしてください。
+     * @defaultValue `false`
+     */
+    isCompact?: boolean | undefined;
+    /**
+     * 無効にするかどうか。
+     * これが `true` のときは、`<a>` 要素の代わりに `<span>` 要素として描画されます。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean | undefined;
+    /**
+     * ローディング中かどうか。
+     * これが `true` の間は、ボタンがローディング表示され無効になります。
+     * @defaultValue `false`
+     */
+    isLoading?: 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/buttonLink/buttonLink.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { ButtonLink } from "../../../components";
+type Meta = RawMeta<typeof ButtonLink>;
+type Story = RawStory<typeof ButtonLink>;
+declare const meta: Meta;
+export declare const Solid: Story;
+export declare const Light: Story;
+export declare const SizeSmall: Story;
+export declare const SizeLarge: Story;
+export declare const Compact: Story;
+export declare const WithIcon: Story;
+export declare const Loading: Story;
+export default meta;

package/dist/components/atoms/buttonLink/buttonLinkIconContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+/**
+ * ### ボタンリンク内のアイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ButtonLinkIconContainer: 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/buttonLink/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./buttonLink";
+export * from "./buttonLinkIconContainer";

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

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+/**
+ * ### チェック系コントロールにラベルを付けるためのコンテナ
+ *
+ * #### 構成
+ * 以下のようなコンポーネント構成で利用してください。
+ * - **`CheckableContainer`**
+ *   - コントロール (必須)
+ *   - [`CheckableLabel`](/docs/atoms-CheckableContainer-CheckableLabel--ドキュメント) (必須)
+ *
+ * 子要素に置くコントロールとしては、[`Checkbox`](/docs/atoms-Checkbox-Checkbox--ドキュメント), [`Radio`](/docs/atoms-Radio-Radio--ドキュメント), [`Switch`](/docs/atoms-Switch-Switch--ドキュメント) が適切です。
+ *
+ * #### 例
+ * 以下はチェックボックスにラベルを付けた例です。
+ *
+ * ```tsx
+ * <CheckableContainer>
+ *   <Checkbox/>
+ *   <CheckableLabel>ラベル</CheckableLabel>
+ * </CheckableContainer>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const CheckableContainer: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * 表示する内容。
+     * コントロールと `CheckableLabel` を 1 つずつ置いてください。
+     */
+    children: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLLabelElement>>;

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

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

package/dist/components/atoms/checkableContainer/checkableLabel.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+/**
+ * ### チェック系コントロール用のラベル
+ *
+ * #### 内部使用のみ
+ * このコンポーネントは [`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) の子要素に配置することを想定しているため、単独では使わないでください。
+ * 詳細は [`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) のドキュメントを参照してください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const CheckableLabel: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    /**
+     * ### チェック系コントロール用のラベル
+     *
+     * #### 内部使用のみ
+     * このコンポーネントは [`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) の子要素に配置することを想定しているため、単独では使わないでください。
+     * 詳細は [`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) のドキュメントを参照してください。
+     * @group React コンポーネント
+     * @category React コンポーネント
+     */
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/checkableContainer/checkableLabel.stories.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from "./checkableContainer";
+export * from "./checkableLabel";

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

@@ -0,0 +1,56 @@
+import { AriaAttributes, ChangeEvent } from "react";
+/**
+ * ### チェックボックス
+ *
+ * #### 注意
+ * このコンポーネントはチェックボックスのみを表示します。
+ * 一緒にラベルを表示したい場合は、[`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) と [`CheckableLabel`](/docs/atoms-CheckableContainer-CheckableLabel--ドキュメント) を利用して、以下のようにしてください。
+ *
+ * ```tsx
+ * <CheckableContainer>
+ *   <Checkbox/>
+ *   <CheckableLabel>ラベル</CheckableLabel>
+ * </CheckableContainer>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /**
+     * チェック状態。
+     * `"indeterminate"` は不定の状態を表します。
+     */
+    isChecked?: boolean | "indeterminate" | undefined;
+    /** */
+    name?: string | undefined;
+    /** */
+    value?: string | undefined;
+    /**
+     * バリデーションエラーがあるかどうか。
+     * これが `true` のときは警告表示になります。
+     * @defaultValue `false`
+     */
+    isError?: boolean | undefined;
+    /** */
+    isRequired?: boolean | undefined;
+    /**
+     * 無効にするかどうか。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean | undefined;
+    /** */
+    onSet?: ((isChecked: true | false) => void) | undefined;
+    /**
+     * `<input>` 要素の `change` イベントのリスナー。
+     * チェック状態を取得したいだけの場合は、`onSet` prop を利用する方が便利です。
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    onBlur?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,15 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Checkbox } from "../../../components";
+type Meta = RawMeta<typeof Checkbox>;
+type Story = RawStory<typeof Checkbox>;
+declare const meta: Meta;
+export declare const Unchecked: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const ErrorUnchecked: Story;
+export declare const ErrorChecked: Story;
+export declare const ErrorIndeterminate: Story;
+export declare const TestUncontrolled: Story;
+export declare const TestControlled: Story;
+export declare const TestHook: Story;
+export default meta;

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

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

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

@@ -0,0 +1,56 @@
+import { ReactNode } from "react";
+/**
+ * ### コントロールにラベルなどを付けるためのコンテナ
+ *
+ * #### 構成
+ * 以下のようなコンポーネント構成で利用してください。
+ * - **`ControlContainer`**
+ *   - [`ControlLabel`](/docs/atoms-ControlContainer-ControlLabel--ドキュメント) (必須)
+ *   - [`ControlHelper`](/docs/atoms-ControlContainer-ControlHelper--ドキュメント) (任意)
+ *   - コントロール (必須)
+ *   - [`ControlErrorMessage`](/docs/atoms-ControlContainer-ControlErrorMessage--ドキュメント) (任意)
+ *
+ * #### 例
+ * 以下は全てを表示した例です。
+ * 実際には、`ControlErrorMessage` がバリデーションエラー時のみ表示されるようにするなどの処理を追加することになります。
+ *
+ * ```tsx
+ * <ControlContainer>
+ *   <ControlLabel>テキスト欄</ControlLabel>
+ *   <ControlHelper>
+ *     コントロールの説明文をここに入れます。
+ *   </ControlHelper>
+ *   <Input/>
+ *   <ControlErrorMessage>
+ *     この欄は必須です。
+ *   </ControlErrorMessage>
+ * </ControlContainer>
+ * ```
+ *
+ * コントロールとしてチェックボックスやラジオボタンを使いたい場合は、[`CheckableContainer`](/docs/atoms-CheckableContainer-CheckableContainer--ドキュメント) を用いることで、チェックボックスやラジオボタンの右にラベルを表示できます。
+ *
+ * ```tsx
+ * <ControlContainer>
+ *   <ControlLabel>利用規約の同意</ControlLabel>
+ *   <ControlHelper>
+ *     会員登録をするには利用規約に同意する必要があります。
+ *   </ControlHelper>
+ *   <CheckableContainer>
+ *     <Checkbox/>
+ *     <CheckableLabel>同意する</CheckableLabel>
+ *   </CheckableContainer>
+ * </ControlContainer>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ControlContainer: 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<HTMLLabelElement>>;

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

@@ -0,0 +1,13 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { ControlContainer } from "../../../components";
+type Meta = RawMeta<typeof ControlContainer>;
+type Story = RawStory<typeof ControlContainer>;
+declare const meta: Meta;
+export declare const WithInput: Story;
+export declare const WithInputAndHelper: Story;
+export declare const WithInputAndHelperAndErrorMessage: Story;
+export declare const WithRadio: Story;
+export declare const WithRadioAndHelper: Story;
+export declare const WithRadioAndHelperAndErrorMessage: Story;
+export declare const TestForm: Story;
+export default meta;

package/dist/components/atoms/controlContainer/controlErrorMessage.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+/**
+ * ### コントロールに対するエラーメッセージ
+ *
+ * #### 内部使用のみ
+ * このコンポーネントは [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) の子要素に配置することを想定しているため、単独では使わないでください。
+ * 詳細は [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) のドキュメントを参照してください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ControlErrorMessage: 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<HTMLParagraphElement>>;

package/dist/components/atoms/controlContainer/controlErrorMessage.stories.d.ts

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

package/dist/components/atoms/controlContainer/controlHelper.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+/**
+ * ### コントロールの説明文
+ *
+ * #### 内部使用のみ
+ * このコンポーネントは [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) の子要素に配置することを想定しているため、単独では使わないでください。
+ * 詳細は [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) のドキュメントを参照してください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ControlHelper: 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<HTMLParagraphElement>>;

package/dist/components/atoms/controlContainer/controlHelper.stories.d.ts

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

package/dist/components/atoms/controlContainer/controlLabel.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+/**
+ * ### コントロールのラベル
+ *
+ * #### 内部使用のみ
+ * このコンポーネントは [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) の子要素に配置することを想定しているため、単独では使わないでください。
+ * 詳細は [`ControlContainer`](/docs/atoms-ControlContainer-ControlContainer--ドキュメント) のドキュメントを参照してください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const ControlLabel: 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/controlContainer/controlLabel.stories.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from "./controlContainer";
+export * from "./controlErrorMessage";
+export * from "./controlHelper";
+export * from "./controlLabel";

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    orientation: "horizontal" | "vertical";
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

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