@baton8/general-components 3.1.0-alpha.0 → 3.1.0-alpha.10

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

@@ -21,7 +21,7 @@ export declare const Badge: import("react").ForwardRefExoticComponent<import("..
      * 見た目のバリアント。
      * @defaultValue `"solid"`
      */
-    variant?: "solid" | "light" | "outline" | undefined;
+    variant?: "outline" | "solid" | "light" | undefined;
     /**
      * サイズ。
      * @defaultValue `"medium"`

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

@@ -53,6 +53,11 @@ export declare const GeneralIcon: import("react").ForwardRefExoticComponent<impo
      * @defaultValue `false`
      */
     spin?: boolean | undefined;
+    /**
+     * アイコンの幅を固定するかどうか。
+     * @defaultValue `false`
+     */
+    isFixedWidth?: boolean | undefined;
     /** */
     className?: string | undefined;
 } & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -23,6 +23,11 @@ export declare const Icon: import("react").ForwardRefExoticComponent<import("../
     name: keyof typeof BUILTIN_ICONS;
     /** */
     label?: string | undefined;
+    /**
+     * アイコンの幅を固定するかどうか。
+     * @defaultValue `false`
+     */
+    isFixedWidth?: boolean | undefined;
     /** */
     className?: string | undefined;
 } & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -53,6 +53,8 @@ export declare const Input: import("react").ForwardRefExoticComponent<import("..
     type?: "date" | "time" | "search" | "month" | "text" | "tel" | "url" | "email" | "datetime-local" | "week" | undefined;
     /** */
     inputMode?: "search" | "numeric" | "decimal" | "text" | "none" | "tel" | "url" | "email" | undefined;
+    /** */
+    placeholder?: string | undefined;
     /**
      * @defaultValue `"off"`
      */

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

@@ -52,6 +52,8 @@ export declare const Link: import("react").ForwardRefExoticComponent<import("../
      * @defaultValue `"medium"`
      */
     size?: "small" | "medium" | "large" | undefined;
+    /** */
+    download?: unknown;
     /**
      * 内部の余白を少なくし、全体を少し小さめに表示するかどうか。
      * 基本的には `false` (デフォルト値) で使うことを推奨しますが、フォームの一部として使う場合など、省スペースで表示したいときには `true` にしてください。

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

@@ -0,0 +1,3 @@
+export * from "./segment";
+export * from "./segmentGroup";
+export * from "./segmentIconContainer";

package/dist/components/atoms/segmentGroup/segment.d.ts

@@ -0,0 +1,32 @@
+import { AriaAttributes, ChangeEvent, ReactNode } from "react";
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Segment: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & AriaAttributes & {
+    /** */
+    value: string;
+    /**
+     * `<input>` 要素の `change` イベントのリスナー。
+     * 入力された値を取得したいだけの場合は、`onSet` prop を利用する方が便利です。
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    onBlur?: ((event: ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    /** */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+    /**
+     * 内部の `<input>` 要素のクラス名。
+     */
+    inputClassName?: string | undefined;
+    /**
+     * 内部の `<input>` 要素の ID。
+     */
+    inputId?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,21 @@
+import { FunctionComponent, ReactNode } from "react";
+import { LeveledColorScheme } from "../../../modules/color";
+type SegmentGroupProps = {
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    scheme?: LeveledColorScheme;
+    /** */
+    value: string;
+    /** */
+    onSet: (value: string) => unknown;
+    /** */
+    children: ReactNode;
+};
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const SegmentGroup: FunctionComponent<SegmentGroupProps>;
+export {};

package/dist/components/atoms/segmentGroup/segmentIconContainer.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const SegmentIconContainer: 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/tag/tag.d.ts

@@ -1,9 +1,6 @@
 import { ReactNode } from "react";
 /**
  * ### タグ
- *
- * #### 専用コンポーネント
- * - [GenreTag](/docs/atoms-Tag-GenreTag-ドキュメント)
  * @group React コンポーネント
  * @category React コンポーネント
  */
@@ -17,6 +14,11 @@ export declare const Tag: import("react").ForwardRefExoticComponent<import("../.
      * @defaultValue `"gray"`
      */
     scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * サイズ。
+     * @defaultValue `"small"`
+     */
+    size?: "small" | "medium" | undefined;
     /** */
     className?: string | undefined;
     /** */

package/dist/components/index.d.ts

@@ -25,6 +25,7 @@ export * from "./atoms/radio";
 export * from "./atoms/radioGroup";
 export * from "./atoms/root";
 export * from "./atoms/secondaryHeading";
+export * from "./atoms/segmentGroup";
 export * from "./atoms/select";
 export * from "./atoms/singleLineText";
 export * from "./atoms/switch";
@@ -45,7 +46,10 @@ export * from "./modules/fractionView";
 export * from "./modules/header";
 export * from "./modules/menu";
 export * from "./modules/pagination";
+export * from "./modules/popover";
 export * from "./modules/rankView";
+export * from "./modules/simpleCard";
+export * from "./modules/simpleCardList";
 export * from "./modules/stepper";
 export * from "./modules/tabList";
 export * from "./modules/toast";

package/dist/components/modules/card/card.d.ts

@@ -5,6 +5,7 @@ import { MouseEvent, ReactNode } from "react";
  * #### 構成
  * 以下のようなコンポーネント構成で利用してください。
  * - **`CardList`**
+ *   - [`CardGrip`](/docs/atoms-Card-CardGrip--ドキュメント) (任意)
  *   - [`CardControlContainer`](/docs/atoms-Card-CardControlContainer--ドキュメント) (任意)
  *     - `Checkbox` や `Radio` などのコントロール
  *   - [`CardBody`](/docs/atoms-Card-CardBody--ドキュメント) (必須)
@@ -20,6 +21,7 @@ import { MouseEvent, ReactNode } from "react";
  *
  * ```tsx
  * <Card>
+ *   <CardGrip/>
  *   <CardControlContainer>
  *     <Checkbox/>
  *   </CardControlContainer>

package/dist/components/modules/card/cardButton.d.ts

@@ -27,6 +27,12 @@ export declare const CardButton: import("react").ForwardRefExoticComponent<impor
      * @defaultValue `"button"`
      */
     type?: "button" | "reset" | "submit" | undefined;
+    /**
+     * ボタンを縦に伸ばすかどうか。
+     * 設定ボタン等は伸ばさない方が自然です。
+     * @defaultValue `true`
+     */
+    isStretched?: boolean | undefined;
     /**
      * 無効にするかどうか。
      *

package/dist/components/modules/card/cardButtonListColumn.d.ts

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

package/dist/components/modules/card/cardGrip.d.ts

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

package/dist/components/modules/card/index.d.ts

@@ -2,6 +2,8 @@ export * from "./card";
 export * from "./cardBody";
 export * from "./cardButton";
 export * from "./cardButtonList";
+export * from "./cardButtonListColumn";
 export * from "./cardControlContainer";
+export * from "./cardGrip";
 export * from "./cardHeadnote";
 export * from "./cardTitle";

package/dist/components/modules/dialog/dialog.d.ts

@@ -40,7 +40,6 @@ type DialogProps = {
  *     - [`DialogTitle`](/docs/modules-Dialog-DialogTitle--ドキュメント) (任意)
  *   - [`DialogBody`](/docs/modules-Dialog-DialogBody--ドキュメント)
  *   - [`DialogFooter`](/docs/modules-Dialog-DialogFooter--ドキュメント) (任意)
- *     - [`DialogFooterButton`](/docs/modules-Dialog-DialogFooterButton--ドキュメント) (2 個まで任意)
  *
  * #### 使い方
  * 非制御と制御の 2 種類の使い方があります。

package/dist/components/modules/drawer/drawer.d.ts

@@ -30,12 +30,14 @@ type DrawerProps = CommonProps & {
  * #### 構成
  * 以下のようなコンポーネント構成で利用してください。
  * - **`Drawer`**
+ *   - [`DrawerCloseButton`](/docs/modules-Drawer-DrawerCloseButton--ドキュメント)
  *   - [`DrawerHeader`](/docs/modules-Drawer-DrawerHeader--ドキュメント) (任意)
  *     - [`DrawerHeaderLeft`](/docs/modules-Drawer-DrawerHeaderLeft--ドキュメント)
  *       - [`DrawerHeaderTitle`](/docs/modules-Drawer-DrawerHeaderTitle--ドキュメント)
  *       - [`DrawerHeaderCaption`](/docs/modules-Drawer-DrawerHeaderCaption--ドキュメント) (任意)
  *     - [`DrawerHeaderRight`](/docs/modules-Drawer-DrawerHeaderRight--ドキュメント)
  *   - [`DrawerBody`](/docs/modules-Drawer-DrawerBody--ドキュメント)
+ *   - [`DrawerFooter`](/docs/modules-Drawer-DrawerFooter--ドキュメント) (任意)
  *
  * @group React コンポーネント
  * @category React コンポーネント

package/dist/components/modules/drawer/drawerCloseButton.d.ts

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

package/dist/components/modules/drawer/drawerFooter.d.ts

@@ -1,8 +1,5 @@
 import { ReactNode } from "react";
 /**
- * @deprecated
- * これまでフッターに配置していたボタン等は、ヘッダーの右側に置くようにしてください。
- *
  * @group React コンポーネント
  * @category React コンポーネント
  */

package/dist/components/modules/drawer/index.d.ts

@@ -2,6 +2,8 @@ export * from "./drawer";
 export * from "./drawerBody";
 export * from "./drawerButton";
 export * from "./drawerCaption";
+export * from "./drawerCloseButton";
+export * from "./drawerFooter";
 export * from "./drawerHeader";
 export * from "./drawerHeaderLeft";
 export * from "./drawerHeaderRight";

package/dist/components/modules/menu/menu.d.ts

@@ -29,6 +29,11 @@ type MenuProps = {
      * @defaultValue `"bottom-start"`
      */
     placement?: Placement;
+    /**
+     * メニューの幅をトリガーの幅に合わせるかどうか。
+     * @defaultValue `false`
+     */
+    fitWidth?: boolean;
     /** */
     className?: string;
     /** */

package/dist/components/modules/popover/index.d.ts

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

package/dist/components/modules/popover/popover.d.ts

@@ -0,0 +1,38 @@
+import { Placement } from "@floating-ui/react";
+import { FunctionComponent, ReactElement, ReactNode } from "react";
+type PopoverProps = {
+    /**
+     * トリガーとなる要素。
+     * ここに要素を指定すると、そこにインタラクションがあったときにポップオーバーが表示されるようになります。
+     */
+    trigger?: ReactElement;
+    /**
+     * トリガーの種類。
+     * @defaultValue `"click"`
+     */
+    triggerType?: "click" | "focus" | "hover";
+    /**
+     * トリガーの持続時間 (ミリ秒単位)。
+     * @defaultValue `null`
+     */
+    triggerRest?: number | null;
+    /**
+     * @defaultValue `false`
+     */
+    isInline?: boolean;
+    /**
+     * ポップオーバーの位置。
+     * @defaultValue `"bottom-start"`
+     */
+    placement?: Placement;
+    /** */
+    className?: string;
+    /** */
+    children?: ReactNode;
+};
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Popover: FunctionComponent<PopoverProps>;
+export {};

package/dist/components/modules/simpleCard/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./simpleCard";
+export * from "./simpleCardBody";
+export * from "./simpleCardButton";

package/dist/components/modules/simpleCard/simpleCard.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { Card } from "../../../components/modules/card/card";
+type Props = ComponentProps<typeof Card>;
+export declare const SimpleCard: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCard/simpleCardBody.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { CardBody } from "../../../components/modules/card/cardBody";
+type Props = {
+    hasButton?: boolean;
+} & ComponentProps<typeof CardBody>;
+export declare const SimpleCardBody: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCard/simpleCardButton.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { CardButton } from "../../../components/modules/card/cardButton";
+type Props = ComponentProps<typeof CardButton>;
+export declare const SimpleCardButton: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCardList/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./simpleCardListAuto";
+export * from "./simpleCardListBodyAuto";
+export * from "./simpleCardListFooterAuto";
+export * from "./simpleCardListHeader";

package/dist/components/modules/simpleCardList/simpleCardListAuto.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { CardListAuto } from "../../../components/modules/cardList/cardListAuto";
+type Props = ComponentProps<typeof CardListAuto>;
+export declare const SimpleCardListAuto: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCardList/simpleCardListBodyAuto.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { CardListBodyAuto } from "../../../components/modules/cardList/cardListBodyAuto";
+type Props = ComponentProps<typeof CardListBodyAuto>;
+export declare const SimpleCardListBodyAuto: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCardList/simpleCardListFooterAuto.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FunctionComponent } from "react";
+import { CardListFooterAuto } from "../../../components/modules/cardList/cardListFooterAuto";
+type Props = ComponentProps<typeof CardListFooterAuto>;
+export declare const SimpleCardListFooterAuto: FunctionComponent<Props>;
+export {};

package/dist/components/modules/simpleCardList/simpleCardListHeader.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent, ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+};
+export declare const SimpleCardListHeader: FunctionComponent<Props>;
+export {};

package/dist/components/modules/stepper/stepperItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { MouseEvent, ReactNode } from "react";
 /**
  * @group React コンポーネント
  * @category React コンポーネント
@@ -11,6 +11,10 @@ export declare const StepperItem: import("react").ForwardRefExoticComponent<impo
     /** */
     scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
     /** */
+    href?: string | undefined;
+    /** */
+    onClick?: ((event: MouseEvent<HTMLElement>) => unknown) | undefined;
+    /** */
     children?: ReactNode;
     /** */
     className?: string | undefined;

package/dist/contexts/dialog/hook.d.ts

@@ -1,10 +1,13 @@
 import { ReactElement } from "react";
-export type OpenDialog = (render: (close: () => void) => ReactElement) => Promise<void>;
+export type OpenDialog = (render: (onClose: () => void) => ReactElement) => Promise<void>;
 /**
  * ダイアログを表示する関数 `openDialog` を返します。
  * `openDialog` 関数にダイアログのレンダー関数を渡すと、そのダイアログが表示されます。
  * ダイアログのレンダー関数にはダイアログを閉じるための関数が渡されるので、キャンセルボタン等に利用してください。
  *
+ * `openDialog` 関数に渡すレンダー関数が返すコンポーネントには、`isOpen`, `onClose` prop が暗黙的に渡されます。
+ * そのため、レンダー関数が独自コンポーネントを返す場合は、そのコンポーネントは `isOpen`, `onClose` prop を受け取って適切に処理しなければなりません。
+ *
  * `openDialog` 関数自体は Promise を返します。
  * この Promise は、ダイアログを閉じたときに解決されます。
  */

package/dist/contexts/segmentGroup/context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LeveledColorScheme } from "../../modules/color";
+type SegmentGroupContextValue = {
+    scheme: LeveledColorScheme;
+    name: string;
+    value: string;
+    onSet: (value: string) => unknown;
+};
+export declare const segmentGroupContext: import("react").Context<SegmentGroupContextValue | undefined>;
+export declare const SegmentGroupProvider: import("react").Provider<SegmentGroupContextValue | undefined>;
+export {};