ingred-ui 19.5.0 → 19.7.0

package/dist/components/DualListBox2/DualListBox2.d.ts

@@ -0,0 +1,50 @@
+import React, { type ReactNode } from "react";
+import { type Item } from "./types";
+type DualListBox2Props = {
+    /**
+     * 選択済みの「追加」項目
+     **/
+    included: Item[];
+    /**
+     * 選択済みの「除外」項目
+     **/
+    excluded: Item[];
+    /**
+     * 追加ボタンを非活性にし、「排他のみモード」にするかどうか
+     **/
+    disableInclude?: boolean;
+    /**
+     * 除外ボタンを非活性にし、「排他のみモード」にするかどうか
+     **/
+    disableExclude?: boolean;
+    /**
+     * メニューに表示するボタン要素
+     **/
+    menuButtons?: ReactNode;
+    /**
+     * ローディング中かどうかのフラグ
+     **/
+    loading?: boolean;
+    /**
+     * 項目リスト（DualListBox2Item, DualListBox2Accordion, DualListBox2Section のいずれかのみ）
+     **/
+    children: ReactNode;
+    /**
+     * 「追加」状態の変更イベントハンドラ
+     **/
+    onIncludedChange: (includedIds: string[]) => void;
+    /**
+     * 「除外」状態の変更イベントハンドラ
+     **/
+    onExcludedChange: (excludedIds: string[]) => void;
+    /**
+     * セクション切り替え時のハンドラ
+     **/
+    onActiveSectionChange?: (activeSection: string | null) => void;
+    /**
+     * 「さらに読み込む」ボタンが押されたときのハンドラ
+     **/
+    onLoadMore?: () => void;
+};
+export declare const DualListBox2: React.ForwardRefExoticComponent<DualListBox2Props & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { type Item, DualListBox2 } from "./index";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        included: Item[];
+        excluded: Item[];
+        disableInclude?: boolean | undefined;
+        disableExclude?: boolean | undefined;
+        menuButtons?: React.ReactNode;
+        loading?: boolean | undefined;
+        children: React.ReactNode;
+        onIncludedChange: (includedIds: string[]) => void;
+        onExcludedChange: (excludedIds: string[]) => void;
+        onActiveSectionChange?: ((activeSection: string | null) => void) | undefined;
+        onLoadMore?: (() => void) | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    argTypes: {};
+};
+export default meta;
+/**
+ * #### ベーシックなタイプ
+ *
+ * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合、上限が決まっている場合いずれにも使えます。
+ *
+ * ---
+ *
+ * `included` と `excluded` で選択中の値を指定します。
+ * 選択状態変更時は、`onIncludedChange` と `onExcludedChange` で、新しい `included` と `excluded` を受け取れるので、これを使って `included` と `excluded` を更新してください。
+ *
+ * children には、左パネル用の選択できる項目を渡します。右パネルの内容は状態に応じて自動で表示管理されます。
+ *
+ */
+export declare const Default: StoryObj<typeof meta>;
+/**
+ * #### 選択候補がアコーディオンで折りたたまれているタイプ
+ *
+ * 件数の上限が決まっていて、多い場合や区切りたい場合に利用します。
+ * セクションごとに一括選択もできます。
+ */
+export declare const Accordion: StoryObj<typeof DualListBox2>;
+/**
+ * 「追加」「除外」のいずれかしかできない場合の例です。
+ * 状況に応じて、`disableExclude`（除外無効）、`disableInclude`（追加無効） に `true` を指定して制御してください。
+ */
+export declare const Either: StoryObj<typeof DualListBox2>;
+/**
+ * #### 選択候補がセクションで分かれているタイプ
+ *
+ * 件数の上限が不明で都度サーバへ問い合わせる必要がある場合に利用します。
+ * 検索は各セクションに移動後に使えます。
+ *
+ * 任意のセクション選択中は、その他のセクションは非表示となります。
+ */
+export declare const Section: StoryObj<typeof DualListBox2>;

package/dist/components/DualListBox2/DualListBox2Accordion.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+type DualListBox2AccordionProps = {
+    label: string;
+    disableInclude?: boolean;
+    disableExclude?: boolean;
+    children: ReactNode;
+};
+export declare const DualListBox2Accordion: ({ label, disableInclude, disableExclude, children, }: DualListBox2AccordionProps) => JSX.Element;
+export {};

package/dist/components/DualListBox2/DualListBox2Item.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+type DualListBox2ItemProps = {
+    id: string;
+    children: ReactNode;
+    disableInclude?: boolean;
+    disableExclude?: boolean;
+};
+export declare const DualListBox2Item: {
+    ({ id, disableInclude, disableExclude, children, }: DualListBox2ItemProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/components/DualListBox2/DualListBox2Section.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+type DualListBox2SectionProps = {
+    label: string;
+    children: ReactNode;
+};
+export declare const DualListBox2Section: {
+    ({ label, children, }: DualListBox2SectionProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

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

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

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

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

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

@@ -0,0 +1,6 @@
+export type { Item } from "./types";
+export { DualListBox2 } from "./DualListBox2";
+export { DualListBox2Item } from "./DualListBox2Item";
+export { DualListBox2Accordion } from "./DualListBox2Accordion";
+export { DualListBox2Section } from "./DualListBox2Section";
+export { toGroupedItems } from "./lib";

package/dist/components/DualListBox2/lib.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { Item } from "./types";
+export declare const DualListBox2Context: import("react").Context<{
+    filterWords: string[];
+    includedIds: string[];
+    excludedIds: string[];
+    activeSection: string | null;
+    onIncludedChange: (includedIds: string[]) => void;
+    onExcludedChange: (excludedIds: string[]) => void;
+    setActiveSection: (activeSection: string | null) => void;
+}>;
+export declare const DualListBox2GroupContext: import("react").Context<{
+    groupName: string;
+}>;
+export declare const traverseChildren: (children: ReactNode, callback: (child: ReactNode) => void) => void;
+export declare const extractAllItems: (children: ReactNode) => Item[];
+export declare const getAllIds: (children: ReactNode) => string[];
+type groupedItems = {
+    groupName?: string;
+    items: Item[];
+};
+export declare const toGroupedItems: (items: Item[]) => groupedItems[];
+export {};

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

@@ -0,0 +1,35 @@
+export declare const DualListBox2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const CountBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const Inner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LeftPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isShow: boolean;
+}, never>;
+export declare const LeftPanelBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LeftPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderMenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderCount: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderButtons: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderLoadButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isShow: boolean;
+}, never>;
+export declare const RightPanelHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightPanelBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedCounts: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedCountIncluded: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedCountExcluded: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedClearButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectedPanelHeading: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DualListBox2Item: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DualListBox2SelectedItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DualListBox2SelectedLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionActionButtons: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const AccordionIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SectionButtonBefore: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SectionButtonAfter: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SectionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,5 @@
+export type Item = {
+    id: string;
+    groupName?: string;
+    label: string;
+};

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,8 +1,18 @@
 import * as React from "react";
 export declare enum RadioButtonSize {
+    SMALL = "16px",
     MEDIUM = "18px"
 }
-export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const indicatorSizes: {
+    "16px": {
+        inside: string;
+        border: string;
+    };
+    "18px": {
+        inside: string;
+        border: string;
+    };
+};
 export type RadioButtonChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
 export type RadioButtonProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
     size?: RadioButtonSize;

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

@@ -9,8 +9,23 @@ declare const _default: {
         onChange?: import("./RadioButton").RadioButtonChangeHandler | undefined;
         inputRef?: React.Ref<HTMLInputElement> | undefined;
     } & React.RefAttributes<HTMLSpanElement | HTMLLabelElement>>;
-    args: {
-        size: RadioButtonSize;
+    argTypes: {
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        checked: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+                options: RadioButtonSize[];
+            };
+        };
     };
 };
 export default _default;

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

@@ -0,0 +1,13 @@
+import { RadioButtonSize } from "./RadioButton";
+export declare const Wrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    size: RadioButtonSize;
+    disabled?: boolean | undefined;
+}, never>;
+type IndicatorProps = {
+    size: RadioButtonSize;
+    inside: string;
+    border: string;
+};
+export declare const Indicator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IndicatorProps, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export {};