ingred-ui 23.8.0 → 23.9.0

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DrawerProps } from "./types";
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Drawer from "./Drawer";
+declare const meta: Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Responsive: Story;
+export declare const WithStickyHeaderFooter: Story;
+export declare const WithCloseConfirmation: Story;
+export declare const DynamicConfirmClose: Story;
+export declare const AnchorTrigger: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { default } from "./Drawer";
+export type { DrawerProps, ConfirmCloseConfig, CloseReason } from "./types";

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

@@ -0,0 +1,25 @@
+export type BackdropProps = {
+    shouldShow: boolean;
+    transitionDuration: number;
+};
+export declare const Backdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BackdropProps, never>;
+export type DrawerContainerProps = {
+    direction: "left" | "right" | "bottom";
+    currentSize: number;
+    shouldShow: boolean;
+    transitionDuration: number;
+};
+export declare const DrawerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DrawerContainerProps, never>;
+export type ResizeHandleProps = {
+    direction: "left" | "right" | "bottom";
+};
+export declare const ResizeHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ResizeHandleProps, never>;
+export type ResizeBarProps = ResizeHandleProps & {
+    active?: boolean;
+};
+export declare const ResizeBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ResizeHandleProps & {
+    active?: boolean | undefined;
+}, never>;
+export declare const StickyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ScrollableContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StickyFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { ConfirmModalProps } from "../ConfirmModal/ConfirmModal";
+export type ConfirmCloseConfig = Pick<ConfirmModalProps, "confirmText" | "cancelText" | "buttonColor"> & {
+    title?: string;
+    message?: string;
+};
+export type DrawerProps = {
+    isOpen: boolean;
+    direction: "left" | "right" | "bottom";
+    onClose?: (reason: "backdropClick" | "escapeKey") => void;
+    size?: string | number;
+    resizable?: boolean;
+    minSize?: string | number;
+    maxSize?: string | number;
+    onResize?: (newSize: number) => void;
+    stickyHeader?: React.ReactNode;
+    stickyFooter?: React.ReactNode;
+    confirmOnClose?: string | ConfirmCloseConfig;
+    children: React.ReactNode;
+    /**
+     * ドロワー表示中も背景をスクロール可能にする（Backdrop非表示）
+     */
+    allowBackgroundScroll?: boolean;
+};
+export type CloseReason = "backdropClick" | "escapeKey";

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

@@ -0,0 +1,22 @@
+/**
+ * Drawerコンポーネント用のユーティリティ関数
+ *
+ * このファイルの主な目的：
+ * 1. 開発者体験の向上: Drawerのsize、minSize、maxSizeプロパティで
+ *    様々な単位（px, vw, vh, %）を受け入れ可能にする
+ * 2. 内部処理の統一: すべてのサイズ計算をpx値で統一し、
+ *    リサイズ処理、バリデーション、アニメーション計算を簡潔にする
+ *
+ * 使用例:
+ * - size="40vw" (ビューポート幅の40%)
+ * - size="300px" (固定300ピクセル)
+ * - size={400} (数値、px扱い)
+ * - size="80%" (画面サイズの80%)
+ */
+/**
+ * 相対値をpx値に変換するヘルパー関数
+ * @param value - 変換する値（数値またはvw/vh/%/px等の単位付き文字列）
+ * @param direction - Drawerの方向（変換時の基準値決定に使用）
+ * @returns px値（数値）
+ */
+export declare const convertToPixels: (value: string | number, direction: "left" | "right" | "bottom") => number;

package/dist/components/index.d.ts

@@ -38,6 +38,8 @@ export { default as DateRangePicker } from "./DateRangePicker";
 export * from "./DateRangePicker";
 export { default as Divider } from "./Divider";
 export * from "./Divider";
+export { default as Drawer } from "./Drawer";
+export * from "./Drawer";
 export { default as DropdownButton } from "./DropdownButton";
 export * from "./DropdownButton";
 export { default as DualListBox } from "./DualListBox";