@xfilecom/front-core 0.2.43 → 0.2.44

package/dist/base.css

@@ -1392,13 +1392,16 @@ button.xfc-badge[aria-disabled='true'] {
   z-index: 9998;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: var(--xfc-space-sm);
-  max-width: 360px;
+  width: max-content;
+  max-width: min(100vw - 2 * var(--xfc-space-md), 28rem);
 }
 
 .xfc-toast {
   display: inline-flex;
-  width: 100%;
+  width: max-content;
+  max-width: min(100vw - 2 * var(--xfc-space-md), 28rem);
   box-sizing: border-box;
   align-items: flex-start;
   justify-content: flex-start;
@@ -1451,7 +1454,7 @@ button.xfc-badge[aria-disabled='true'] {
 }
 
 .xfc-toast__message {
-  flex: 1 1 0;
+  flex: 0 1 auto;
   min-width: 0;
   overflow-wrap: break-word;
   word-wrap: break-word;

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

@@ -1,5 +1,7 @@
-import type { ReactNode, SVGAttributes } from 'react';
+import { type ReactNode, type SVGAttributes } from 'react';
 export type ToastSeverity = 'info' | 'success' | 'warn' | 'error';
+/** `ToastList` 기본 자동 닫기 간격(ms) */
+export declare const DEFAULT_TOAST_AUTO_DISMISS_MS = 2000;
 export type ToastSeverityIconProps = {
     severity: ToastSeverity;
 } & Pick<SVGAttributes<SVGSVGElement>, 'className' | 'style'>;
@@ -24,6 +26,11 @@ export type ToastEntry = {
     icon?: ReactNode | null;
     /** 행별 닫기 버튼. 생략 시 `ToastList`의 `dismissible`(기본 true)을 따름. */
     dismissible?: boolean;
+    /**
+     * 자동 닫기 지연(ms). `false`면 이 행만 끔.
+     * 생략 시 `ToastList`의 `defaultAutoDismissMs`(기본 `DEFAULT_TOAST_AUTO_DISMISS_MS`)를 따름.
+     */
+    autoDismissMs?: number | false;
 };
 export type ToastListProps = {
     toasts: ToastEntry[];
@@ -32,6 +39,11 @@ export type ToastListProps = {
     dismissAriaLabel?: string;
     /** 행에 `dismissible`이 없을 때 쓰는 기본값. 생략 시 각 토스트는 `dismissible` 기본 true. */
     dismissible?: boolean;
+    /**
+     * 목록 기본 자동 닫기(ms). `false`면 목록 전체에서 끔(행별 `autoDismissMs`로 개별 켤 수 있음).
+     * @default DEFAULT_TOAST_AUTO_DISMISS_MS
+     */
+    defaultAutoDismissMs?: number | false;
 };
 /** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
-export declare function ToastList({ toasts, onDismiss, className, dismissAriaLabel, dismissible: listDismissible, }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ToastList({ toasts, onDismiss, className, dismissAriaLabel, dismissible: listDismissible, defaultAutoDismissMs, }: ToastListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/Toast.js

@@ -1,9 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TOAST_AUTO_DISMISS_MS = void 0;
 exports.ToastSeverityIcon = ToastSeverityIcon;
 exports.Toast = Toast;
 exports.ToastList = ToastList;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/** `ToastList` 기본 자동 닫기 간격(ms) */
+exports.DEFAULT_TOAST_AUTO_DISMISS_MS = 2000;
+function ToastDismissTimer({ id, ms, onDismiss, }) {
+    const onDismissRef = (0, react_1.useRef)(onDismiss);
+    onDismissRef.current = onDismiss;
+    (0, react_1.useEffect)(() => {
+        if (ms <= 0)
+            return;
+        const t = setTimeout(() => {
+            onDismissRef.current(id);
+        }, ms);
+        return () => clearTimeout(t);
+    }, [id, ms]);
+    return null;
+}
+function resolveAutoDismissMs(entry, listDefault) {
+    if (entry.autoDismissMs === false)
+        return 0;
+    if (typeof entry.autoDismissMs === 'number') {
+        return entry.autoDismissMs > 0 ? entry.autoDismissMs : 0;
+    }
+    const d = listDefault === undefined ? exports.DEFAULT_TOAST_AUTO_DISMISS_MS : listDefault;
+    if (d === false)
+        return 0;
+    return d > 0 ? d : 0;
+}
 const iconSvgProps = {
     width: 20,
     height: 20,
@@ -40,12 +68,13 @@ function Toast({ severity, message, onDismiss, className = '', icon, dismissAria
     return ((0, jsx_runtime_1.jsxs)("div", { className: root, role: liveRole, children: [iconContent != null ? (0, jsx_runtime_1.jsx)("span", { className: "xfc-toast__icon", children: iconContent }) : null, (0, jsx_runtime_1.jsx)("div", { className: "xfc-toast__message", children: message }), showDismiss ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "xfc-toast-dismiss", onClick: onDismiss, "aria-label": dismissAriaLabel, children: (0, jsx_runtime_1.jsx)(ToastCloseIcon, {}) })) : null] }));
 }
 /** 하단 고정 토스트 스택 (business-promotion `ToastList` UI, 상태는 부모에서 주입). */
-function ToastList({ toasts, onDismiss, className = '', dismissAriaLabel, dismissible: listDismissible, }) {
+function ToastList({ toasts, onDismiss, className = '', dismissAriaLabel, dismissible: listDismissible, defaultAutoDismissMs, }) {
     if (!toasts.length)
         return null;
     const listCls = ['xfc-toast-list', className].filter(Boolean).join(' ');
     return ((0, jsx_runtime_1.jsx)("div", { className: listCls, "aria-live": "polite", "aria-relevant": "additions text", children: toasts.map((t) => {
             const rowDismissible = t.dismissible ?? listDismissible ?? true;
-            return ((0, jsx_runtime_1.jsx)(Toast, { severity: t.severity, message: t.message, icon: t.icon, dismissAriaLabel: dismissAriaLabel, dismissible: rowDismissible, onDismiss: () => onDismiss(t.id) }, t.id));
+            const dismissMs = resolveAutoDismissMs(t, defaultAutoDismissMs);
+            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [dismissMs > 0 ? ((0, jsx_runtime_1.jsx)(ToastDismissTimer, { id: t.id, ms: dismissMs, onDismiss: onDismiss })) : null, (0, jsx_runtime_1.jsx)(Toast, { severity: t.severity, message: t.message, icon: t.icon, dismissAriaLabel: dismissAriaLabel, dismissible: rowDismissible, onDismiss: () => onDismiss(t.id) })] }, t.id));
         }) }));
 }

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

@@ -32,7 +32,7 @@ export { Switch, type SwitchProps } from './Switch';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, } from './Table';
 export { Tabs, TabsContent, TabsList, TabsTrigger, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, } from './Tabs';
 export { Textarea, type TextareaProps, } from './Textarea';
-export { Toast, ToastList, ToastSeverityIcon, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './Toast';
+export { Toast, ToastList, ToastSeverityIcon, DEFAULT_TOAST_AUTO_DISMISS_MS, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, } from './Toast';
 export { Text, type TextProps, type TextVariant } from './Text';
 export { Toggle, type ToggleProps } from './Toggle';
 export { Tooltip, type TooltipProps } from './Tooltip';

package/dist/components/atoms/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCaption = exports.TableBody = exports.Table = exports.Switch = exports.Stack = exports.Slider = exports.Skeleton = exports.Separator = exports.Select = exports.ScrollArea = exports.RadioGroupItem = exports.RadioGroup = exports.Progress = exports.PaginationLink = exports.PaginationItem = exports.PaginationEllipsis = exports.PaginationContent = exports.Pagination = exports.Paper = exports.LoadingOverlay = exports.Label = exports.Input = exports.InlineErrorList = exports.Field = exports.CollapsibleTrigger = exports.CollapsibleContent = exports.Collapsible = exports.Checkbox = exports.Card = exports.Button = exports.Box = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbList = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.Breadcrumb = exports.Badge = exports.AvatarImage = exports.AvatarFallback = exports.AvatarAuto = exports.Avatar = exports.AspectRatio = exports.AlertTitle = exports.AlertDescription = exports.Alert = exports.AccordionTrigger = exports.AccordionItem = exports.AccordionContent = exports.Accordion = void 0;
-exports.Tooltip = exports.Toggle = exports.Text = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = void 0;
+exports.Tooltip = exports.Toggle = exports.Text = exports.DEFAULT_TOAST_AUTO_DISMISS_MS = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = void 0;
 /**
  * Atomic UI — design tokens + base.css 의 `.xfc-*` 와 1:1.
  * 패키지 루트는 `components/index.ts` → 여기서 동일 심볼을 재export.
@@ -100,6 +100,7 @@ var Toast_1 = require("./Toast");
 Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
 Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return Toast_1.ToastList; } });
 Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return Toast_1.ToastSeverityIcon; } });
+Object.defineProperty(exports, "DEFAULT_TOAST_AUTO_DISMISS_MS", { enumerable: true, get: function () { return Toast_1.DEFAULT_TOAST_AUTO_DISMISS_MS; } });
 var Text_1 = require("./Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 var Toggle_1 = require("./Toggle");

package/dist/generatedVersion.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated by scripts/write-version.js — do not edit by hand */
-export declare const XFRAME_FRONT_CORE_VERSION: "0.2.43";
+export declare const XFRAME_FRONT_CORE_VERSION: "0.2.44";

package/dist/generatedVersion.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFRAME_FRONT_CORE_VERSION = void 0;
 /** Auto-generated by scripts/write-version.js — do not edit by hand */
-exports.XFRAME_FRONT_CORE_VERSION = "0.2.43";
+exports.XFRAME_FRONT_CORE_VERSION = "0.2.44";

package/dist/index.d.ts

@@ -51,6 +51,6 @@ export declare const tokenVars: {
     readonly toastWarnBg: "--xfc-toast-warn-bg";
     readonly toastErrorBg: "--xfc-toast-error-bg";
 };
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarAuto, AvatarFallback, AvatarImage, Badge, BottomSheet, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, Dialog, Field, InlineErrorList, Input, Label, LoadingOverlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, Paper, Progress, RadioGroup, RadioGroupItem, ScrollArea, Select, Separator, Skeleton, Slider, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toast, ToastList, ToastSeverityIcon, Toggle, Tooltip, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, type AspectRatioProps, type AvatarAutoProps, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, type BadgeProps, type BottomSheetProps, type BoxProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbProps, type BreadcrumbSeparatorProps, type ButtonProps, type CardProps, type CheckboxProps, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps, type ConfirmDialogProps, type DialogProps, type FieldProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LabelProps, type LoadingOverlayProps, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationProps, type PaperProps, type ProgressProps, type RadioGroupItemProps, type RadioGroupProps, type ScrollAreaProps, type SelectProps, type SeparatorProps, type SkeletonProps, type SliderProps, type StackProps, type SwitchProps, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, type TextProps, type TextVariant, type TextareaProps, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, type ToggleProps, type TooltipProps, } from './components';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarAuto, AvatarFallback, AvatarImage, Badge, BottomSheet, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, Dialog, Field, InlineErrorList, Input, Label, LoadingOverlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, Paper, Progress, RadioGroup, RadioGroupItem, ScrollArea, Select, Separator, Skeleton, Slider, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toast, ToastList, ToastSeverityIcon, DEFAULT_TOAST_AUTO_DISMISS_MS, Toggle, Tooltip, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, type AspectRatioProps, type AvatarAutoProps, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, type BadgeProps, type BottomSheetProps, type BoxProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbProps, type BreadcrumbSeparatorProps, type ButtonProps, type CardProps, type CheckboxProps, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps, type ConfirmDialogProps, type DialogProps, type FieldProps, type InlineErrorEntry, type InlineErrorListProps, type InputProps, type LabelProps, type LoadingOverlayProps, type PaginationContentProps, type PaginationEllipsisProps, type PaginationItemProps, type PaginationLinkProps, type PaginationProps, type PaperProps, type ProgressProps, type RadioGroupItemProps, type RadioGroupProps, type ScrollAreaProps, type SelectProps, type SeparatorProps, type SkeletonProps, type SliderProps, type StackProps, type SwitchProps, type TableBodyProps, type TableCaptionProps, type TableCellProps, type TableFooterProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TabsContentProps, type TabsListProps, type TabsProps, type TabsTriggerProps, type TextProps, type TextVariant, type TextareaProps, type ToastEntry, type ToastListProps, type ToastProps, type ToastSeverity, type ToastSeverityIconProps, type ToggleProps, type TooltipProps, } from './components';
 /** 커스텀 오버레이용 — `Dialog`/`BottomSheet`와 동일한 훅 */
 export { useBodyScrollLock, useEscapeKey, useFocusTrap } from './components';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = exports.Skeleton = exports.Separator = exports.Select = exports.ScrollArea = exports.RadioGroupItem = exports.RadioGroup = exports.Progress = exports.Paper = exports.PaginationLink = exports.PaginationItem = exports.PaginationEllipsis = exports.PaginationContent = exports.Pagination = exports.LoadingOverlay = exports.Label = exports.Input = exports.InlineErrorList = exports.Field = exports.Dialog = exports.ConfirmDialog = exports.CollapsibleTrigger = exports.CollapsibleContent = exports.Collapsible = exports.Checkbox = exports.Card = exports.Button = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbList = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.Breadcrumb = exports.Box = exports.BottomSheet = exports.Badge = exports.AvatarImage = exports.AvatarFallback = exports.AvatarAuto = exports.Avatar = exports.AspectRatio = exports.AlertTitle = exports.AlertDescription = exports.Alert = exports.AccordionTrigger = exports.AccordionItem = exports.AccordionContent = exports.Accordion = exports.tokenVars = exports.XFRAME_FRONT_CORE_VERSION = void 0;
-exports.useFocusTrap = exports.useEscapeKey = exports.useBodyScrollLock = exports.Tooltip = exports.Toggle = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.Text = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Switch = exports.Stack = void 0;
+exports.useFocusTrap = exports.useEscapeKey = exports.useBodyScrollLock = exports.Tooltip = exports.Toggle = exports.DEFAULT_TOAST_AUTO_DISMISS_MS = exports.ToastSeverityIcon = exports.ToastList = exports.Toast = exports.Textarea = exports.Text = exports.TabsTrigger = exports.TabsList = exports.TabsContent = exports.Tabs = exports.TableRow = exports.TableHeader = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableCaption = exports.TableBody = exports.Table = exports.Switch = exports.Stack = void 0;
 /**
  * @xfilecom/front-core — design tokens + atomic React components (browser-only).
  *
@@ -124,6 +124,7 @@ Object.defineProperty(exports, "Textarea", { enumerable: true, get: function ()
 Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return components_1.Toast; } });
 Object.defineProperty(exports, "ToastList", { enumerable: true, get: function () { return components_1.ToastList; } });
 Object.defineProperty(exports, "ToastSeverityIcon", { enumerable: true, get: function () { return components_1.ToastSeverityIcon; } });
+Object.defineProperty(exports, "DEFAULT_TOAST_AUTO_DISMISS_MS", { enumerable: true, get: function () { return components_1.DEFAULT_TOAST_AUTO_DISMISS_MS; } });
 Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return components_1.Toggle; } });
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return components_1.Tooltip; } });
 /** 커스텀 오버레이용 — `Dialog`/`BottomSheet`와 동일한 훅 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/front-core",
-  "version": "0.2.43",
+  "version": "0.2.44",
   "description": "Shared design tokens, base CSS, and atomic React components (browser-only; no Nest dependency)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",