ingred-ui 31.1.0 → 32.1.0

package/dist/components/NavigationRail/Fixture/Fixture.d.ts

@@ -3,5 +3,5 @@ export type LabelFixtureTooltip = (isFixed: boolean) => string;
 type Props = {
     labelFixtureTooltip?: LabelFixtureTooltip;
 };
-declare const Fixture: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Fixture: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export { Fixture };

package/dist/components/NavigationRail/Fixture/styled.d.ts

@@ -1 +1,2 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+/** Tooltip の参照要素。子の入れ替え時もホバー追跡を安定させる */
+export declare const FixtureTooltipAnchor: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/components/NavigationRail/MobileMenuButton/MobileMenuButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * モバイルの「メニューを開く」ボタン。
+ *
+ * `NavigationRail.Container` 配下の任意の場所（独自 AppBar 内など）に設置できる。
+ * 設置すると Container は自動でデフォルト（右上固定）のメニューボタンを描画しなくなるため、
+ * 二重描画にならない。開閉ロジック・通知バッジ・アクセシビリティは組み込みと同一。
+ */
+export declare const MobileMenuButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NavigationRail/MobileMenuButton/MobileMenuButtonView.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * モバイルの「メニューを開く」ボタン本体（presentational）。
+ * 表示条件（モバイル かつ ドロワー閉）と通知バッジ表示を内包する。
+ * 配置（固定/インライン）は呼び出し側に委ねる。
+ */
+export declare const MobileMenuButtonView: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NavigationRail/MobileMenuButton/index.d.ts

@@ -0,0 +1 @@
+export { MobileMenuButton } from "./MobileMenuButton";

package/dist/components/NavigationRail/NavigationRail.d.ts

@@ -6,6 +6,8 @@ import { Fixture } from "./Fixture";
 import { Menu } from "./Menu";
 import { ExpansionMenu } from "./ExpansionMenu";
 import { ExpansionMenuItem } from "./ExpansionMenuItem";
+import { Slot, SlotContent } from "./Slot";
+import { MobileMenuButton } from "./MobileMenuButton";
 type ExportedComponentType = {
     (props: Props & React.RefAttributes<HTMLDivElement>): JSX.Element;
     Container: typeof NavigationRailContainer;
@@ -17,13 +19,12 @@ type ExportedComponentType = {
     ExpansionMenuItem: typeof ExpansionMenuItem;
     Fixture: typeof Fixture;
     MainContent: typeof MainContent;
+    Slot: typeof Slot;
+    SlotContent: typeof SlotContent;
+    MobileMenuButton: typeof MobileMenuButton;
 };
 type Props = {
     children?: React.ReactNode;
-    /**
-     * モバイルメニューが開いた時に、閉じるボタンとメニューの間に表示するコンテンツ
-     */
-    mobileHeaderContent?: React.ReactNode;
 };
-declare const _default: ExportedComponentType;
-export default _default;
+declare const ExportedComponent: ExportedComponentType;
+export default ExportedComponent;

package/dist/components/NavigationRail/NavigationRailContainer/NavigationRailContainer.d.ts

@@ -12,6 +12,23 @@ export type NavigationRailContainerProps = {
      * It can define callback function that triggered when NavigationRail is `fixed`.
      */
     onChangeFixed?: (isFixed: boolean) => void;
+    /**
+     * モバイル向けの未読件数。メニュー内の `Menu` / `ExpansionMenu` 等も含めた合算を渡す。
+     * ドロワー閉時はメニューを開くボタンに赤ドット（件数なし）、開時は Slot 内の通知ボタンへ件数表示。
+     */
+    notificationCount?: number;
+    /**
+     * デスクトップ向け、Slot 領域のみの未読件数（通知ボタンへ件数表示）。
+     * 折りたたみ時の `Fixture` には 1 件以上で赤ドットのみ（件数なし）。メニュー行とは別管理。
+     */
+    slotNotificationCount?: number;
+    /**
+     * モバイル時にデフォルト（右上固定）の「メニューを開く」ボタンを描画するか。
+     * `NavigationRail.MobileMenuButton` を配置した場合はデフォルトが自動抑制される。
+     * 自前ボタンのみ使う場合は `false` を指定する。
+     * @default true
+     */
+    showMobileMenuButton?: boolean;
     children: React.ReactNode;
 };
 declare const NavigationRailContainer: React.ForwardRefExoticComponent<NavigationRailContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavigationRail/Slot/Slot.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export type SlotProps = {
+    children?: React.ReactNode;
+    /**
+     * 右端に表示する操作（デスクトップの Fixture など）。
+     * モバイル時は上段に閉じるボタンのみ表示し、`actions` は無視される。
+     * 下段 `children` の padding は利用側で指定する。
+     * 未指定時のデスクトップ: Fixture。
+     */
+    actions?: React.ReactNode;
+};
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;
+export { Slot };

package/dist/components/NavigationRail/Slot/SlotContent.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type SlotContentVisibility = "desktop" | "mobile" | "all";
+export type SlotContentProps = {
+    children?: React.ReactNode;
+    /**
+     * 表示するビューポート。
+     * - `desktop`: 576px 超のみ
+     * - `mobile`: 576px 以下のみ
+     * - `all`: 常に（レール開閉による非表示は Slot 側で制御）
+     */
+    visibility?: SlotContentVisibility;
+};
+declare const SlotContent: React.ForwardRefExoticComponent<SlotContentProps & React.RefAttributes<HTMLDivElement>>;
+export { SlotContent };

package/dist/components/NavigationRail/Slot/index.d.ts

@@ -0,0 +1,4 @@
+export { Slot } from "./Slot";
+export type { SlotProps } from "./Slot";
+export { SlotContent } from "./SlotContent";
+export type { SlotContentProps, SlotContentVisibility } from "./SlotContent";

package/dist/components/NavigationRail/Slot/styled.d.ts

@@ -0,0 +1,6 @@
+export declare const MobileSlotRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+export declare const MobileCloseBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+export declare const SlotBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+export declare const SlotCustom: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+export declare const SlotActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
+export declare const SlotContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;

package/dist/components/NavigationRail/constants.d.ts

@@ -1,9 +1,14 @@
 export declare const NavigationRailWidth: {
-    readonly NARROW: "74px";
+    readonly NARROW: "64px";
     readonly WIDE: "256px";
 };
 export declare const NavigationRailContentHeight: {
     readonly HEADER: "72px";
     readonly FOOTER: "72px";
+    readonly SLOT: "56px";
+    /** モバイル Slot 上段（閉じるボタン専用行） */
+    readonly SLOT_MOBILE_CLOSE: "48px";
 };
 export declare const NavigationRailTransitionDuration = 0.3;
+/** NotificationBadge overlay の角からのオフセット（%）。アイコンボタン向け */
+export declare const NavigationRailBadgeOverlayOffsetPercent = 10;

package/dist/components/NavigationRail/hooks/useNavigationRail.d.ts

@@ -0,0 +1,2 @@
+import { type NavigationRailContextValues } from "../utils";
+export declare function useNavigationRail(): NavigationRailContextValues;

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

@@ -3,4 +3,6 @@ export type { NavigationRailExpansionMenuProps } from "./ExpansionMenu";
 export type { NavigationRailExpansionMenuItemProps } from "./ExpansionMenuItem";
 export type { NavigationRailMenuProps } from "./Menu";
 export type { NavigationRailContainerProps } from "./NavigationRailContainer";
+export type { SlotProps } from "./Slot";
+export type { SlotContentProps, SlotContentVisibility } from "./Slot";
 export * from "./utils";

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

@@ -1,4 +1,2 @@
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
 export declare const MobileOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never> & Partial<Pick<any, never>>> & string;
-export declare const MobileCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
-export declare const MobileHeaderContent: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/components/NavigationRail/utils.d.ts

@@ -9,5 +9,20 @@ export type NavigationRailContextValues = {
     isMobile: boolean;
     isMobileMenuOpen: boolean;
     handleMobileMenuToggle?: () => void;
+    /**
+     * 任意位置に設置された `NavigationRail.MobileMenuButton` を登録する。
+     * 登録があると Container はデフォルト（右上固定）のメニューボタンを描画しない。
+     */
+    registerMobileMenuButton?: () => void;
+    unregisterMobileMenuButton?: () => void;
+    /**
+     * モバイル向けの未読件数（メニュー内の通知を含む合算。ドロワー閉時は開くボタンへ表示）。
+     */
+    notificationCount: number;
+    /**
+     * デスクトップ向け、Slot 領域のみの未読件数（通知ボタン・折りたたみ時の Fixture）。
+     */
+    slotNotificationCount: number;
 };
 export declare const NavigationRailContext: React.Context<NavigationRailContextValues>;
+export { useNavigationRail } from "./hooks/useNavigationRail";

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -8,17 +8,23 @@ type NotificationBadgeBaseProps = NotificationBadgePillProps & {
     showZero?: boolean;
     invisible?: boolean;
     children: React.ReactNode;
+    /**
+     * overlay 時、角から外へずらす量（バッジ自身の幅・高さに対する %）。
+     * 小さいほど子（主にアイコン）に近づく。`0` で角に揃う。inline では無視される。
+     * @default 50
+     */
+    overlayOffsetPercent?: number;
 };
-type OverlayNormalProps = NotificationBadgeBaseProps & {
+type OverlayLayoutProps = NotificationBadgeBaseProps & {
     layout?: "overlay";
-    variant?: "normal";
     position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+};
+type OverlayNormalProps = OverlayLayoutProps & {
+    variant?: "normal";
     dotSize?: never;
 };
-type OverlayDotProps = NotificationBadgeBaseProps & {
-    layout?: "overlay";
+type OverlayDotProps = OverlayLayoutProps & {
     variant: "dot";
-    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
     /** dot variant のサイズ */
     dotSize?: "small" | "medium" | "large";
 };
@@ -28,6 +34,7 @@ type InlineProps = NotificationBadgeBaseProps & {
     variant?: "normal";
     position?: never;
     dotSize?: never;
+    overlayOffsetPercent?: never;
 };
 export type NotificationBadgeProps = OverlayNormalProps | OverlayDotProps | InlineProps;
 declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBadgeProps & React.RefAttributes<HTMLDivElement>>;