@charcoal-ui/react 6.1.0-beta.0 → 6.1.0-beta.1

package/dist/components/Notification/NotificationItem.cjs

@@ -0,0 +1,30 @@
+"use client";
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useToast = require("react-aria/useToast");
+
+//#region src/components/Notification/NotificationItem.tsx
+function NotificationItem({ name, toast, state, itemRef, onHoverStart, onHoverEnd, children, ...rootProps }) {
+	const { toastProps, contentProps, titleProps } = (0, react_aria_useToast.useToast)({ toast }, state, itemRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...toastProps,
+		...rootProps,
+		ref: itemRef,
+		className: `charcoal-notification charcoal-${name}`,
+		onPointerEnter: onHoverStart,
+		onPointerLeave: onHoverEnd,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...contentProps,
+			role: "status",
+			className: "charcoal-notification-content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...titleProps,
+				className: "charcoal-notification-label",
+				children: toast.content.message
+			})
+		}), children]
+	});
+}
+
+//#endregion
+exports.NotificationItem = NotificationItem;
+//# sourceMappingURL=NotificationItem.cjs.map

package/dist/components/Notification/NotificationItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.cjs","names":[],"sources":["../../../src/components/Notification/NotificationItem.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, RefObject } from 'react'\nimport { useToast } from 'react-aria/useToast'\nimport type { QueuedToast, ToastState } from 'react-stately/useToastState'\nimport type { NotificationName } from './types'\n\nexport function NotificationItem<TContent extends { message: ReactNode }>({\n  name,\n  toast,\n  state,\n  itemRef,\n  onHoverStart,\n  onHoverEnd,\n  children,\n  ...rootProps\n}: {\n  name: NotificationName\n  toast: QueuedToast<TContent>\n  state: ToastState<TContent>\n  itemRef: RefObject<HTMLDivElement>\n  onHoverStart: () => void\n  onHoverEnd: () => void\n  children?: ReactNode\n} & Omit<HTMLAttributes<HTMLDivElement>, 'itemRef'>) {\n  const { toastProps, contentProps, titleProps } = useToast(\n    { toast },\n    state,\n    itemRef,\n  )\n\n  return (\n    <div\n      {...toastProps}\n      {...rootProps}\n      ref={itemRef}\n      className={`charcoal-notification charcoal-${name}`}\n      onPointerEnter={onHoverStart}\n      onPointerLeave={onHoverEnd}\n    >\n      <div\n        {...contentProps}\n        role=\"status\"\n        className=\"charcoal-notification-content\"\n      >\n        <div {...titleProps} className=\"charcoal-notification-label\">\n          {toast.content.message}\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAA0D,EACxE,MACA,OACA,OACA,SACA,cACA,YACA,UACA,GAAG,aASgD;CACnD,MAAM,EAAE,YAAY,cAAc,iDAChC,EAAE,MAAM,GACR,OACA,OACF;CAEA,OACE,4CAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACJ,KAAK;EACL,WAAW,kCAAkC;EAC7C,gBAAgB;EAChB,gBAAgB;YANlB,CAQE,2CAAC,OAAD;GACE,GAAI;GACJ,MAAK;GACL,WAAU;aAEV,2CAAC,OAAD;IAAK,GAAI;IAAY,WAAU;cAC5B,MAAM,QAAQ;GACZ;EACF,IACJ,QACE;;AAET"}

package/dist/components/Notification/NotificationItem.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode, RefObject } from 'react';
+import type { QueuedToast, ToastState } from 'react-stately/useToastState';
+import type { NotificationName } from './types';
+export declare function NotificationItem<TContent extends {
+    message: ReactNode;
+}>({ name, toast, state, itemRef, onHoverStart, onHoverEnd, children, ...rootProps }: {
+    name: NotificationName;
+    toast: QueuedToast<TContent>;
+    state: ToastState<TContent>;
+    itemRef: RefObject<HTMLDivElement>;
+    onHoverStart: () => void;
+    onHoverEnd: () => void;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'itemRef'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationItem.d.ts.map

package/dist/components/Notification/NotificationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAC1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS;IAAE,OAAO,EAAE,SAAS,CAAA;CAAE,EAAE,EACxE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,GAAG,SAAS,EACb,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC5B,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;IAClC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,2CA4BlD"}

package/dist/components/Notification/NotificationItem.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useToast } from "react-aria/useToast";
+
+//#region src/components/Notification/NotificationItem.tsx
+function NotificationItem({ name, toast, state, itemRef, onHoverStart, onHoverEnd, children, ...rootProps }) {
+	const { toastProps, contentProps, titleProps } = useToast({ toast }, state, itemRef);
+	return /* @__PURE__ */ jsxs("div", {
+		...toastProps,
+		...rootProps,
+		ref: itemRef,
+		className: `charcoal-notification charcoal-${name}`,
+		onPointerEnter: onHoverStart,
+		onPointerLeave: onHoverEnd,
+		children: [/* @__PURE__ */ jsx("div", {
+			...contentProps,
+			role: "status",
+			className: "charcoal-notification-content",
+			children: /* @__PURE__ */ jsx("div", {
+				...titleProps,
+				className: "charcoal-notification-label",
+				children: toast.content.message
+			})
+		}), children]
+	});
+}
+
+//#endregion
+export { NotificationItem };
+//# sourceMappingURL=NotificationItem.js.map

package/dist/components/Notification/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","names":[],"sources":["../../../src/components/Notification/NotificationItem.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, RefObject } from 'react'\nimport { useToast } from 'react-aria/useToast'\nimport type { QueuedToast, ToastState } from 'react-stately/useToastState'\nimport type { NotificationName } from './types'\n\nexport function NotificationItem<TContent extends { message: ReactNode }>({\n  name,\n  toast,\n  state,\n  itemRef,\n  onHoverStart,\n  onHoverEnd,\n  children,\n  ...rootProps\n}: {\n  name: NotificationName\n  toast: QueuedToast<TContent>\n  state: ToastState<TContent>\n  itemRef: RefObject<HTMLDivElement>\n  onHoverStart: () => void\n  onHoverEnd: () => void\n  children?: ReactNode\n} & Omit<HTMLAttributes<HTMLDivElement>, 'itemRef'>) {\n  const { toastProps, contentProps, titleProps } = useToast(\n    { toast },\n    state,\n    itemRef,\n  )\n\n  return (\n    <div\n      {...toastProps}\n      {...rootProps}\n      ref={itemRef}\n      className={`charcoal-notification charcoal-${name}`}\n      onPointerEnter={onHoverStart}\n      onPointerLeave={onHoverEnd}\n    >\n      <div\n        {...contentProps}\n        role=\"status\"\n        className=\"charcoal-notification-content\"\n      >\n        <div {...titleProps} className=\"charcoal-notification-label\">\n          {toast.content.message}\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAA0D,EACxE,MACA,OACA,OACA,SACA,cACA,YACA,UACA,GAAG,aASgD;CACnD,MAAM,EAAE,YAAY,cAAc,eAAe,SAC/C,EAAE,MAAM,GACR,OACA,OACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACJ,KAAK;EACL,WAAW,kCAAkC;EAC7C,gBAAgB;EAChB,gBAAgB;YANlB,CAQE,oBAAC,OAAD;GACE,GAAI;GACJ,MAAK;GACL,WAAU;aAEV,oBAAC,OAAD;IAAK,GAAI;IAAY,WAAU;cAC5B,MAAM,QAAQ;GACZ;EACF,IACJ,QACE;;AAET"}

package/dist/components/Notification/NotificationRegion.cjs

@@ -0,0 +1,50 @@
+"use client";
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_Overlay = require("react-aria/Overlay");
+let react_aria_useToast = require("react-aria/useToast");
+
+//#region src/components/Notification/NotificationRegion.tsx
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 20;
+function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
+	const regionRef = (0, react.useRef)(null);
+	const pausedByFocusRef = (0, react.useRef)(false);
+	const { regionProps } = (0, react_aria_useToast.useToastRegion)({}, {
+		...state,
+		pauseAll() {
+			if (regionRef.current?.contains(document.activeElement)) {
+				pausedByFocusRef.current = true;
+				state.pauseAll();
+			}
+		},
+		resumeAll() {
+			if (pausedByFocusRef.current) {
+				pausedByFocusRef.current = false;
+				state.resumeAll();
+			}
+		}
+	}, regionRef);
+	const classNames = require_useClassNames.useClassNames("charcoal-notification-region", `charcoal-${name}-region`, className);
+	if (state.visibleToasts.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
+		disableFocusManagement: true,
+		portalContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...regionProps,
+			ref: regionRef,
+			className: classNames,
+			"data-position": position,
+			style: {
+				zIndex,
+				[`--charcoal-${name}-offset`]: `${offset}px`
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+exports.NotificationRegion = NotificationRegion;
+//# sourceMappingURL=NotificationRegion.cjs.map

package/dist/components/Notification/NotificationRegion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationRegion.cjs","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\n    ...state,\n    pauseAll() {\n      if (regionRef.current?.contains(document.activeElement)) {\n        pausedByFocusRef.current = true\n        state.pauseAll()\n      }\n    },\n    resumeAll() {\n      if (pausedByFocusRef.current) {\n        pausedByFocusRef.current = false\n        state.resumeAll()\n      }\n    },\n  }\n  const { regionProps } = useToastRegion({}, timerState, regionRef)\n  const classNames = useClassNames(\n    'charcoal-notification-region',\n    `charcoal-${name}-region`,\n    className,\n  )\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        data-position={position}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${offset}px`,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,SAAS,iBACT,iBACA,WACA,YAUC;CACD,MAAM,8BAAmC,IAAI;CAC7C,MAAM,qCAA0B,KAAK;CAgBrC,MAAM,EAAE,wDAA+B,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,oCACjB,gCACA,YAAY,KAAI,UAChB,SACF;CAEA,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,2CAAC,4BAAD;EAAS;EAAwC;YAC/C,2CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,iBAAe;GACf,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,OAAM;GAC1C;GAGD;EACE;CACE;AAEb"}

package/dist/components/Notification/NotificationRegion.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { ToastState } from 'react-stately/useToastState';
+import type { NotificationName, Position } from './types';
+export declare function NotificationRegion<TContent>({ name, state, position, offset, zIndex, portalContainer, className, children, }: {
+    name: NotificationName;
+    state: ToastState<TContent>;
+    position: Position;
+    offset?: number;
+    zIndex?: number;
+    portalContainer?: HTMLElement;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=NotificationRegion.d.ts.map

package/dist/components/Notification/NotificationRegion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKzD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,EAC3C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,MAAwB,EACxB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,kDA+CA"}

package/dist/components/Notification/NotificationRegion.js

@@ -0,0 +1,50 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Overlay } from "react-aria/Overlay";
+import { useToastRegion } from "react-aria/useToast";
+
+//#region src/components/Notification/NotificationRegion.tsx
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 20;
+function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
+	const regionRef = useRef(null);
+	const pausedByFocusRef = useRef(false);
+	const { regionProps } = useToastRegion({}, {
+		...state,
+		pauseAll() {
+			if (regionRef.current?.contains(document.activeElement)) {
+				pausedByFocusRef.current = true;
+				state.pauseAll();
+			}
+		},
+		resumeAll() {
+			if (pausedByFocusRef.current) {
+				pausedByFocusRef.current = false;
+				state.resumeAll();
+			}
+		}
+	}, regionRef);
+	const classNames = useClassNames("charcoal-notification-region", `charcoal-${name}-region`, className);
+	if (state.visibleToasts.length === 0) return null;
+	return /* @__PURE__ */ jsx(Overlay, {
+		disableFocusManagement: true,
+		portalContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			...regionProps,
+			ref: regionRef,
+			className: classNames,
+			"data-position": position,
+			style: {
+				zIndex,
+				[`--charcoal-${name}-offset`]: `${offset}px`
+			},
+			children
+		})
+	});
+}
+
+//#endregion
+export { NotificationRegion };
+//# sourceMappingURL=NotificationRegion.js.map

package/dist/components/Notification/NotificationRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationRegion.js","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\n    ...state,\n    pauseAll() {\n      if (regionRef.current?.contains(document.activeElement)) {\n        pausedByFocusRef.current = true\n        state.pauseAll()\n      }\n    },\n    resumeAll() {\n      if (pausedByFocusRef.current) {\n        pausedByFocusRef.current = false\n        state.resumeAll()\n      }\n    },\n  }\n  const { regionProps } = useToastRegion({}, timerState, regionRef)\n  const classNames = useClassNames(\n    'charcoal-notification-region',\n    `charcoal-${name}-region`,\n    className,\n  )\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        data-position={position}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${offset}px`,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,SAAS,iBACT,iBACA,WACA,YAUC;CACD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,mBAAmB,OAAO,KAAK;CAgBrC,MAAM,EAAE,gBAAgB,eAAe,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,cACjB,gCACA,YAAY,KAAI,UAChB,SACF;CAEA,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,oBAAC,SAAD;EAAS;EAAwC;YAC/C,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,iBAAe;GACf,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,OAAM;GAC1C;GAGD;EACE;CACE;AAEb"}

package/dist/components/Notification/Snackbar/index.d.ts

@@ -0,0 +1,45 @@
+import '../layout.css';
+import './index.css';
+import type { ReactNode } from 'react';
+import type { NotificationProps, Position } from '../types';
+export type SnackbarCloseReason = 'timeout' | 'replaced' | 'action' | 'close' | 'unmounted';
+export type ShowSnackbarOptions = {
+    /**
+     * Snackbar の右側に表示するアクション
+     */
+    action?: ReactNode;
+    /**
+     * Snackbar が閉じるときに呼び出される
+     */
+    onClose?: (reason: SnackbarCloseReason) => void;
+};
+export type SnackbarHandler = {
+    show: (message: ReactNode, options?: ShowSnackbarOptions) => void;
+};
+export type SnackbarProps = Omit<NotificationProps, 'position'> & {
+    /**
+     * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
+     * @default 'bottom'
+     */
+    position?: Position;
+    /**
+     * 暗い背景色
+     * @default false
+     */
+    dim?: boolean;
+};
+declare const Snackbar: import("react").ForwardRefExoticComponent<Omit<NotificationProps, "position"> & {
+    /**
+     * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
+     * @default 'bottom'
+     */
+    position?: Position;
+    /**
+     * 暗い背景色
+     * @default false
+     */
+    dim?: boolean;
+} & import("react").RefAttributes<SnackbarHandler>>;
+export default Snackbar;
+export declare function useSnackbar(props?: SnackbarProps): readonly [import("react/jsx-runtime").JSX.Element, (message: ReactNode, options?: ShowSnackbarOptions) => void];
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Notification/Snackbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAC7B,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAClE,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IAChE;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAOD,QAAA,MAAM,QAAQ;IAjBZ;;;OAGG;eACQ,QAAQ;IACnB;;;OAGG;UACG,OAAO;mDAqEb,CAAA;eAEa,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,aAAkB,gEAK5B,SAAS,YAAY,mBAAmB,WAIhE"}

package/dist/components/Notification/Snackbar/index2.cjs

@@ -0,0 +1,99 @@
+"use client";
+require('../layout.cjs');
+require('./index.cjs');
+const require_NotificationItem = require('../NotificationItem.cjs');
+const require_NotificationRegion = require('../NotificationRegion.cjs');
+const require_useNotificationQueue = require('../useNotificationQueue.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_compiler_runtime = require("react-compiler-runtime");
+
+//#region src/components/Notification/Snackbar/index.tsx
+const Snackbar = (0, react.forwardRef)(function Snackbar({ position = "bottom", dim = false, duration, order, ...regionProps }, ref) {
+	"use memo";
+	const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } = require_useNotificationQueue.useNotificationQueue("snackbar", {
+		duration,
+		order,
+		timeoutReason: "timeout",
+		unmountedReason: "unmounted"
+	});
+	function show(message, options = {}) {
+		enqueue({
+			message,
+			action: options.action
+		}, options.onClose);
+	}
+	(0, react.useImperativeHandle)(ref, () => ({ show }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationRegion.NotificationRegion, {
+		name: "snackbar",
+		state,
+		position: state.visibleToasts.some((toast) => toast.content.action !== void 0) ? "bottom" : position,
+		...regionProps,
+		children: state.visibleToasts.map((toast_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationItem.NotificationItem, {
+			name: "snackbar",
+			toast: toast_0,
+			state,
+			itemRef,
+			onHoverStart,
+			onHoverEnd,
+			"data-dim": dim,
+			"data-with-action": toast_0.content.action !== void 0,
+			children: toast_0.content.action !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, {
+				action: toast_0.content.action,
+				onClick: () => close(toast_0.key, "action")
+			})
+		}, toast_0.key))
+	});
+});
+function useSnackbar(t0) {
+	"use memo";
+	const $ = (0, react_compiler_runtime.c)(8);
+	if ($[0] !== "1dc1eb8429c7be1137abcfa05286c14e7ca96230a56b18d315897aa3a5101e4e") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1dc1eb8429c7be1137abcfa05286c14e7ca96230a56b18d315897aa3a5101e4e";
+	}
+	let t1;
+	if ($[1] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	const props = t1;
+	const snackbarHandlerRef = (0, react.useRef)(null);
+	let t2;
+	if ($[3] !== props) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Snackbar, {
+			ref: snackbarHandlerRef,
+			...props
+		});
+		$[3] = props;
+		$[4] = t2;
+	} else t2 = $[4];
+	const element = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = function show(message, options) {
+			snackbarHandlerRef.current?.show(message, options);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const show = t3;
+	let t4;
+	if ($[6] !== element) {
+		t4 = [element, show];
+		$[6] = element;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
+function SnackbarAction({ action, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onClick,
+		children: action
+	});
+}
+
+//#endregion
+exports.default = Snackbar;
+exports.useSnackbar = useSnackbar;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Notification/Snackbar/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["toast","snackbarHandlerRef"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  /**\n   * Snackbar の右側に表示するアクション\n   */\n  action?: ReactNode\n  /**\n   * Snackbar が閉じるときに呼び出される\n   */\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\nexport type SnackbarHandler = {\n  show: (message: ReactNode, options?: ShowSnackbarOptions) => void\n}\n\nexport type SnackbarProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n   * @default 'bottom'\n   */\n  position?: Position\n  /**\n   * 暗い背景色\n   * @default false\n   */\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n  { position = 'bottom', dim = false, duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue(\n      {\n        message,\n        action: options.action,\n      },\n      options.onClose,\n    )\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  // アクション付きの Snackbar は常に下部に表示される\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n\n  return (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <SnackbarAction\n              action={toast.content.action}\n              onClick={() => close(toast.key, 'action')}\n            />\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n  'use memo'\n\n  const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n  const element = <Snackbar ref={snackbarHandlerRef} {...props} />\n  function show(message: ReactNode, options?: ShowSnackbarOptions) {\n    snackbarHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n\nfunction SnackbarAction({\n  action,\n  onClick,\n}: {\n  action: ReactNode\n  onClick: () => void\n}) {\n  return <div onClick={onClick}>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,iCAAsD,SAAS,SACnE,EAAE,WAAW,UAAU,MAAM,OAAO,UAAU,OAAO,GAAG,eACxD,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,kDAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QACE;GACE;GACA,QAAQ,QAAQ;EAClB,GACA,QAAQ,OACV;CACF;CAEA,+BAAoB,YAAY,EAAE,KAAK,EAAE;CAQzC,OACE,2CAAC,+CAAD;EACE,MAAK;EACE;EACP,UATc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAO7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,2CAAC,2CAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,2CAAC,gBAAD;IACE,QAAQA,QAAM,QAAQ;IACtB,eAAe,MAAMA,QAAM,KAAK,QAAQ;GAAE;EAG9B,GAhBXA,QAAM,GAgBK,CACnB;CACiB;AAExB,CAAC;AAID,SAAO,YAAA,IAAA;CAAA;CAAA,MAAA,kCAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,KAAA,OAAA,SAAA,CAAwB,IAAxB;EAAyB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAzB,MAAA,QAAA;CAG1B,MAAA,uCAAmD,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACxC,KAAA,2CAAC,UAAD;GAAeC,KAAA;GAAkB,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAhE,MAAA,UAAgB;CAAgD,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAChE,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,mBAAkB,SAAc,KAAC,SAAS,OAAO;EAAC;EACnD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB;AAGjC,SAAS,eAAe,EACtB,QACA,WAIC;CACD,OAAO,2CAAC,OAAD;EAAc;YAAU;CAAY;AAC7C"}

package/dist/components/Notification/Snackbar/index2.js

@@ -0,0 +1,94 @@
+"use client";
+/* empty css        */
+/* empty css      */
+import { NotificationItem } from "../NotificationItem.js";
+import { NotificationRegion } from "../NotificationRegion.js";
+import { useNotificationQueue } from "../useNotificationQueue.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+
+//#region src/components/Notification/Snackbar/index.tsx
+const Snackbar = forwardRef(function Snackbar({ position = "bottom", dim = false, duration, order, ...regionProps }, ref) {
+	"use memo";
+	const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } = useNotificationQueue("snackbar", {
+		duration,
+		order,
+		timeoutReason: "timeout",
+		unmountedReason: "unmounted"
+	});
+	function show(message, options = {}) {
+		enqueue({
+			message,
+			action: options.action
+		}, options.onClose);
+	}
+	useImperativeHandle(ref, () => ({ show }));
+	return /* @__PURE__ */ jsx(NotificationRegion, {
+		name: "snackbar",
+		state,
+		position: state.visibleToasts.some((toast) => toast.content.action !== void 0) ? "bottom" : position,
+		...regionProps,
+		children: state.visibleToasts.map((toast_0) => /* @__PURE__ */ jsx(NotificationItem, {
+			name: "snackbar",
+			toast: toast_0,
+			state,
+			itemRef,
+			onHoverStart,
+			onHoverEnd,
+			"data-dim": dim,
+			"data-with-action": toast_0.content.action !== void 0,
+			children: toast_0.content.action !== void 0 && /* @__PURE__ */ jsx(SnackbarAction, {
+				action: toast_0.content.action,
+				onClick: () => close(toast_0.key, "action")
+			})
+		}, toast_0.key))
+	});
+});
+function useSnackbar(t0) {
+	"use memo";
+	const $ = c(7);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const props = t1;
+	const snackbarHandlerRef = useRef(null);
+	let t2;
+	if ($[2] !== props) {
+		t2 = /* @__PURE__ */ jsx(Snackbar, {
+			ref: snackbarHandlerRef,
+			...props
+		});
+		$[2] = props;
+		$[3] = t2;
+	} else t2 = $[3];
+	const element = t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = function show(message, options) {
+			snackbarHandlerRef.current?.show(message, options);
+		};
+		$[4] = t3;
+	} else t3 = $[4];
+	const show = t3;
+	let t4;
+	if ($[5] !== element) {
+		t4 = [element, show];
+		$[5] = element;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+function SnackbarAction({ action, onClick }) {
+	return /* @__PURE__ */ jsx("div", {
+		onClick,
+		children: action
+	});
+}
+
+//#endregion
+export { Snackbar as default, useSnackbar };
+//# sourceMappingURL=index2.js.map

package/dist/components/Notification/Snackbar/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["toast","snackbarHandlerRef"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  /**\n   * Snackbar の右側に表示するアクション\n   */\n  action?: ReactNode\n  /**\n   * Snackbar が閉じるときに呼び出される\n   */\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\nexport type SnackbarHandler = {\n  show: (message: ReactNode, options?: ShowSnackbarOptions) => void\n}\n\nexport type SnackbarProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n   * @default 'bottom'\n   */\n  position?: Position\n  /**\n   * 暗い背景色\n   * @default false\n   */\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n  { position = 'bottom', dim = false, duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue(\n      {\n        message,\n        action: options.action,\n      },\n      options.onClose,\n    )\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  // アクション付きの Snackbar は常に下部に表示される\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n\n  return (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <SnackbarAction\n              action={toast.content.action}\n              onClick={() => close(toast.key, 'action')}\n            />\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n  'use memo'\n\n  const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n  const element = <Snackbar ref={snackbarHandlerRef} {...props} />\n  function show(message: ReactNode, options?: ShowSnackbarOptions) {\n    snackbarHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n\nfunction SnackbarAction({\n  action,\n  onClick,\n}: {\n  action: ReactNode\n  onClick: () => void\n}) {\n  return <div onClick={onClick}>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,WAAW,WAA2C,SAAS,SACnE,EAAE,WAAW,UAAU,MAAM,OAAO,UAAU,OAAO,GAAG,eACxD,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,qBAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QACE;GACE;GACA,QAAQ,QAAQ;EAClB,GACA,QAAQ,OACV;CACF;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAQzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACP,UATc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAO7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,oBAAC,kBAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,oBAAC,gBAAD;IACE,QAAQA,QAAM,QAAQ;IACtB,eAAe,MAAMA,QAAM,KAAK,QAAQ;GAAE;EAG9B,GAhBXA,QAAM,GAgBK,CACnB;CACiB;AAExB,CAAC;AAID,SAAO,YAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,KAAA,OAAA,SAAA,CAAwB,IAAxB;EAAyB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAzB,MAAA,QAAA;CAG1B,MAAA,qBAA2B,OAAwB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACxC,KAAA,oBAAC,UAAD;GAAeC,KAAA;GAAkB,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAhE,MAAA,UAAgB;CAAgD,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAChE,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,mBAAkB,SAAc,KAAC,SAAS,OAAO;EAAC;EACnD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB;AAGjC,SAAS,eAAe,EACtB,QACA,WAIC;CACD,OAAO,oBAAC,OAAD;EAAc;YAAU;CAAY;AAC7C"}

package/dist/components/Notification/Toast/index.d.ts

@@ -0,0 +1,28 @@
+import '../layout.css';
+import './index.css';
+import type { ReactNode } from 'react';
+import type { NotificationProps, Position } from '../types';
+export type ToastType = 'success' | 'error';
+export type ShowToastOptions = {
+    type: ToastType;
+};
+export type ToastHandler = {
+    show: (message: ReactNode, options: ShowToastOptions) => void;
+};
+export type ToastProps = Omit<NotificationProps, 'position'> & {
+    /**
+     * Toast の表示位置
+     * @default 'top'
+     */
+    position?: Position;
+};
+declare const Toast: import("react").ForwardRefExoticComponent<Omit<NotificationProps, "position"> & {
+    /**
+     * Toast の表示位置
+     * @default 'top'
+     */
+    position?: Position;
+} & import("react").RefAttributes<ToastHandler>>;
+export default Toast;
+export declare function useToast(props?: ToastProps): readonly [import("react/jsx-runtime").JSX.Element, (message: ReactNode, options: ShowToastOptions) => void];
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Notification/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/Toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC9D,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IAC7D;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAOD,QAAA,MAAM,KAAK;IAZT;;;OAGG;eACQ,QAAQ;gDA+CnB,CAAA;eAEa,KAAK;AAEpB,wBAAgB,QAAQ,CAAC,KAAK,GAAE,UAAe,gEAKtB,SAAS,WAAW,gBAAgB,WAI5D"}

package/dist/components/Notification/Toast/index2.cjs

@@ -0,0 +1,86 @@
+"use client";
+require('../layout.cjs');
+const require_NotificationItem = require('../NotificationItem.cjs');
+const require_NotificationRegion = require('../NotificationRegion.cjs');
+const require_useNotificationQueue = require('../useNotificationQueue.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_compiler_runtime = require("react-compiler-runtime");
+
+//#region src/components/Notification/Toast/index.tsx
+const Toast = (0, react.forwardRef)(function Toast({ position = "top", duration, order, ...regionProps }, ref) {
+	"use memo";
+	const { state, itemRef, enqueue, onHoverStart, onHoverEnd } = require_useNotificationQueue.useNotificationQueue("toast", {
+		duration,
+		order
+	});
+	function show(message, options) {
+		enqueue({
+			message,
+			type: options.type
+		});
+	}
+	(0, react.useImperativeHandle)(ref, () => ({ show }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationRegion.NotificationRegion, {
+		name: "toast",
+		state,
+		position,
+		...regionProps,
+		children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationItem.NotificationItem, {
+			name: "toast",
+			toast,
+			state,
+			itemRef,
+			onHoverStart,
+			onHoverEnd,
+			"data-type": toast.content.type
+		}, toast.key))
+	});
+});
+function useToast(t0) {
+	"use memo";
+	const $ = (0, react_compiler_runtime.c)(8);
+	if ($[0] !== "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e";
+	}
+	let t1;
+	if ($[1] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	const props = t1;
+	const toastHandlerRef = (0, react.useRef)(null);
+	let t2;
+	if ($[3] !== props) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toast, {
+			ref: toastHandlerRef,
+			...props
+		});
+		$[3] = props;
+		$[4] = t2;
+	} else t2 = $[4];
+	const element = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = function show(message, options) {
+			toastHandlerRef.current?.show(message, options);
+		};
+		$[5] = t3;
+	} else t3 = $[5];
+	const show = t3;
+	let t4;
+	if ($[6] !== element) {
+		t4 = [element, show];
+		$[6] = element;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
+
+//#endregion
+exports.default = Toast;
+exports.useToast = useToast;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Notification/Toast/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n  type: ToastType\n}\n\nexport type ToastHandler = {\n  show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Toast の表示位置\n   * @default 'top'\n   */\n  position?: Position\n}\n\ntype ToastContent = {\n  message: ReactNode\n  type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n  { position = 'top', duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n    useNotificationQueue<ToastContent>('toast', { duration, order })\n\n  function show(message: ReactNode, options: ShowToastOptions) {\n    enqueue({\n      message,\n      type: options.type,\n    })\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  return (\n    <NotificationRegion\n      name=\"toast\"\n      state={state}\n      position={position}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"toast\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-type={toast.content.type}\n        />\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n  'use memo'\n\n  const toastHandlerRef = useRef<ToastHandler>(null)\n  const element = <Toast ref={toastHandlerRef} {...props} />\n  function show(message: ReactNode, options: ShowToastOptions) {\n    toastHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,8BAA6C,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,kDAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,+BAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,2CAAC,+CAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,2CAAC,2CAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,kCAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,KAAA,OAAA,SAAA,CAAqB,IAArB;EAAsB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtB,MAAA,QAAA;CAGvB,MAAA,oCAA6C,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAClC,KAAA,2CAAC,OAAD;GAAYA,KAAA;GAAe,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,UAAgB;CAA0C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC1D,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,gBAAe,SAAc,KAAC,SAAS,OAAO;EAAC;EAChD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB"}