@nurihaus/web-design-system 3.2.0 → 3.4.0

package/dist/{chunk-436.js → chunk-9436.js}

@@ -1,6 +1,6 @@
 "use client";
-export const __webpack_esm_id__ = 436;
-export const __webpack_esm_ids__ = [436];
+export const __webpack_esm_id__ = 9436;
+export const __webpack_esm_ids__ = [9436];
 export const __webpack_esm_modules__ = {
 
 /***/ 9436

package/dist/{chunk-976.js → chunk-9976.js}

@@ -1,6 +1,6 @@
 "use client";
-export const __webpack_esm_id__ = 976;
-export const __webpack_esm_ids__ = [976];
+export const __webpack_esm_id__ = 9976;
+export const __webpack_esm_ids__ = [9976];
 export const __webpack_esm_modules__ = {
 
 /***/ 9976
@@ -12,7 +12,7 @@ export const __webpack_esm_modules__ = {
 /* unused harmony exports variant, sizes */
 /* harmony import */ var _helpers_props_common_props__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(7298);
 
-var variant = ['primary', 'secondary', 'ghost', 'neutral', 'confirm', 'outlined'];
+var variant = ['primary', 'secondary', 'ghost', 'neutral', 'confirm', 'outlined', 'social'];
 var sizes = ['xs', 's', 'm', 'l', 'xl'];
 var ctaButtonProps = {
   variant: {

package/dist/collapsible-menu.js

@@ -17,6 +17,8 @@ __nuri_require__.d(__webpack_exports__, {
 var jsx_runtime_ = __nuri_require__(612);
 // EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
 var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
+// EXTERNAL MODULE: ./helpers/hooks/useTrack.ts
+var useTrack = __nuri_require__(4560);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
 var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
@@ -117,6 +119,7 @@ var collapsible_menu_assign = undefined && undefined.__assign || function () {
 
 
 
+
 var Anchor = function Anchor(props) {
   return (0,jsx_runtime_.jsx)("a", collapsible_menu_assign({}, props));
 };
@@ -130,7 +133,13 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     onActiveKeyChange = _a.onActiveKeyChange,
     _b = _a.indent,
     indent = _b === void 0 ? 12 : _b,
-    linkComponent = _a.linkComponent;
+    linkComponent = _a.linkComponent,
+    track = _a.track,
+    trackProps = _a.trackProps;
+  var emit = (0,useTrack/* useTrack */.n)('CollapsibleMenu', {
+    track: track,
+    trackProps: trackProps
+  });
   var Link = linkComponent !== null && linkComponent !== void 0 ? linkComponent : Anchor;
   var rootClassName = (0,classNames/* classNames */.x)(className, 'collapsible-menu');
   var _hasActiveDescendant = function hasActiveDescendant(item) {
@@ -139,6 +148,12 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
     if (item.key === activeKey) return true;
     return (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.some(_hasActiveDescendant)) !== null && _b !== void 0 ? _b : false;
   };
+  var selectItem = function selectItem(item) {
+    var _a;
+    emit('navigate', item.key);
+    onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
+    (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+  };
   var _renderItems = function renderItems(targetItems, depth) {
     var indentStyle = {
       paddingLeft: "".concat(depth * indent, "px")
@@ -179,13 +194,11 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
           "aria-current": isActive ? 'page' : undefined,
           "aria-disabled": item.disabled ? 'true' : undefined,
           onClick: function onClick(e) {
-            var _a;
             if (item.disabled) {
               e.preventDefault();
               return;
             }
-            onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
-            (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+            selectItem(item);
           },
           children: left
         }, item.key);
@@ -195,9 +208,7 @@ var CollapsibleMenu = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
         className: itemClassName,
         disabled: item.disabled,
         onClick: function onClick() {
-          var _a;
-          onActiveKeyChange === null || onActiveKeyChange === void 0 ? void 0 : onActiveKeyChange(item.key);
-          (_a = item.onSelect) === null || _a === void 0 ? void 0 : _a.call(item);
+          return selectItem(item);
         },
         children: left
       }, item.key);
@@ -234,7 +245,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef) });
+module.exports = x({ ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef) });
 
 /***/ },
 
@@ -339,7 +350,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		311: 0
+/******/ 		6311: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -379,15 +390,17 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-917.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ import * as __webpack_chunk_3__ from "./chunk-4917.js";
+/******/ __nuri_require__.C(__webpack_chunk_3__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,917], () => (__nuri_require__(5932)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,4917], () => (__nuri_require__(5932)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/components/badge/badge-props.d.ts

@@ -1,10 +1,10 @@
-export declare const variant: readonly ["neutral", "primary", "danger", "outlined"];
+export declare const variant: readonly ["neutral", "primary", "danger", "outlined", "callout"];
 export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare const iconTextBadgeProps: {
     variant: {
         type: "className";
         className: string;
-        values: readonly ["neutral", "primary", "danger", "outlined"];
+        values: readonly ["neutral", "primary", "danger", "outlined", "callout"];
         default: "neutral";
     };
     size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
@@ -14,7 +14,7 @@ export declare const iconTextOptionBadgeProps: {
     variant: {
         type: "className";
         className: string;
-        values: readonly ["neutral", "primary", "danger", "outlined"];
+        values: readonly ["neutral", "primary", "danger", "outlined", "callout"];
         default: "neutral";
     };
     size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
@@ -24,7 +24,7 @@ export declare const optionBadgeProps: {
     variant: {
         type: "className";
         className: string;
-        values: readonly ["neutral", "primary", "danger", "outlined"];
+        values: readonly ["neutral", "primary", "danger", "outlined", "callout"];
         default: "neutral";
     };
     size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;

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

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: readonly ["neutral", "primary", "danger", "outlined"];
+            options: readonly ["neutral", "primary", "danger", "outlined", "callout"];
         };
         size: {
             control: {

package/dist/components/bottom-nav/bottom-nav-type.d.ts

@@ -1,6 +1,7 @@
-import type { ComponentPropsWithRef, ComponentType, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ComponentType, MouseEventHandler, ReactNode } from 'react';
 import { StyleProps } from '../../helpers/types/common-props';
 import { IconName } from '../icon/icon-type';
+import { TrackProps } from '../logging/logging-type';
 export interface BottomNavBadge {
     /** 숫자. 없으면 점으로 그린다. 99 를 넘으면 99+ */
     count?: number;
@@ -21,8 +22,10 @@ export interface BottomNavLinkProps {
     className: string;
     children: ReactNode;
     'aria-current'?: 'page';
+    /** `track` 을 주면 누를 때 로그를 보낸다. 직접 만든 `linkComponent` 는 이 값을 `<a>` 에 넘긴다 */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
-export interface BottomNavProps extends StyleProps {
+export interface BottomNavProps extends StyleProps, TrackProps {
     items: BottomNavItem[];
     /** 지금 화면의 탭 id. 주소에서 정하므로 탭 바가 스스로 바꾸지 않는다 */
     value?: string;

package/dist/components/breadcrumb/breadcrumb-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './breadcrumb-props';
 export type BreadcrumbRootProps = ComponentPropsWithRef<'nav'>;
 export type BreadcrumbListProps = ComponentPropsWithRef<'ol'>;
@@ -17,7 +18,7 @@ export interface BreadcrumbItem {
     /** 없으면 링크가 아닌 글자로 그린다. 마지막 항목은 href 가 있어도 현재 위치로 그린다. */
     href?: string;
 }
-export interface BreadcrumbProps extends StyleProps {
+export interface BreadcrumbProps extends StyleProps, TrackProps {
     items: BreadcrumbItem[];
     size?: (typeof sizes)[number];
     /** 마지막(현재 위치) 항목이 아닌 항목을 클릭하면 그 id 로 불린다. */

package/dist/components/button/button-props.d.ts

@@ -1,10 +1,10 @@
-export declare const variant: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined"];
+export declare const variant: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined", "social"];
 export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare const ctaButtonProps: {
     variant: {
         type: "className";
         className: string;
-        values: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined"];
+        values: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined", "social"];
         default: "primary";
     };
     size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;

package/dist/components/button/button-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes, variant } from './button-props';
 export interface CommonButtonProps {
     loading?: boolean;
@@ -8,7 +9,7 @@ export interface BaseButtonProps extends ComponentPropsWithRef<'button'>, Common
     children?: ReactNode;
     loadingComponent?: ReactNode;
 }
-export interface CTAButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps {
+export interface CTAButtonProps extends ComponentPropsWithRef<'button'>, CommonButtonProps, TrackProps {
     variant?: (typeof variant)[number];
     size?: (typeof sizes)[number];
     text: string | ReactNode;

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

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined"];
+            options: readonly ["primary", "secondary", "ghost", "neutral", "confirm", "outlined", "social"];
         };
         size: {
             control: {

package/dist/components/check-box/check-box-type.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './check-box-props';
 export interface CheckBoxRootProps {
     checked?: boolean;
@@ -15,7 +16,7 @@ export interface CheckBoxLabelProps extends AsChildProps {
     preventChangeOnClick?: boolean;
     className?: string;
 }
-export interface CheckBoxProps extends CheckBoxRootProps {
+export interface CheckBoxProps extends CheckBoxRootProps, TrackProps {
     label: string | ReactNode;
     size?: (typeof sizes)[number];
     className?: string;

package/dist/components/chip-group/chip-group-type.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 export interface ChipGroupItem {
     id: string;
     label: ReactNode;
@@ -7,7 +8,7 @@ export interface ChipGroupItem {
     count?: number;
     disabled?: boolean;
 }
-export interface ChipGroupProps extends StyleProps {
+export interface ChipGroupProps extends StyleProps, TrackProps {
     items: ChipGroupItem[];
     value?: string;
     defaultValue?: string;

package/dist/components/collapsible-menu/collapsible-menu-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './collapsible-menu-props';
 export interface CollapsibleMenuRootProps {
     defaultOpen?: boolean;
@@ -30,7 +31,7 @@ export interface CollapsibleMenuLinkProps {
     'aria-current'?: 'page';
     'aria-disabled'?: 'true';
 }
-export interface CollapsibleMenuProps extends StyleProps {
+export interface CollapsibleMenuProps extends StyleProps, TrackProps {
     size?: (typeof sizes)[number];
     items: CollapsibleMenuItem[];
     activeKey?: string;

package/dist/components/drawer/drawer-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sides, sizes } from './drawer-props';
 export interface DrawerRootProps {
     open?: boolean;
@@ -15,7 +16,7 @@ export interface DrawerDescriptionProps extends ComponentPropsWithRef<'p'>, AsCh
 }
 export interface DrawerCloseProps extends ComponentPropsWithRef<'button'>, AsChildProps {
 }
-export interface DrawerProps extends DrawerRootProps, StyleProps {
+export interface DrawerProps extends DrawerRootProps, StyleProps, TrackProps {
     /** asChild 로 감싸 클릭하면 열리는 요소. 없으면 open·defaultOpen 으로만 연다 */
     trigger?: ReactElement;
     title: ReactNode;

package/dist/components/drop-down/drop-down-type.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './drop-down-props';
 export interface DropDownRootProps {
     defaultOpen?: boolean;
@@ -27,7 +28,7 @@ export interface DropDownItemProps extends AsChildProps {
     disabled?: boolean;
     onClick?: () => void;
 }
-export interface DropDownProps extends StyleProps {
+export interface DropDownProps extends StyleProps, TrackProps {
     size?: (typeof sizes)[number];
     defaultValue?: string;
     value?: string;

package/dist/components/icon/icon-paths.d.ts

@@ -63,6 +63,10 @@ export declare const iconPaths: {
         readonly regular: readonly ["M251.77,73a8,8,0,0,0-8.21.39L208,97.05V72a16,16,0,0,0-16-16H32A16,16,0,0,0,16,72V184a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V159l35.56,23.71A8,8,0,0,0,248,184a8,8,0,0,0,8-8V80A8,8,0,0,0,251.77,73ZM192,184H32V72H192V184Zm48-22.95-32-21.33V116.28L240,95Z"];
         readonly fill: readonly ["M192,72V184a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V72A16,16,0,0,1,32,56H176A16,16,0,0,1,192,72Zm58,.25a8.23,8.23,0,0,0-6.63,1.22L209.78,95.86A4,4,0,0,0,208,99.19v57.62a4,4,0,0,0,1.78,3.33l33.78,22.52a8,8,0,0,0,8.58.19,8.33,8.33,0,0,0,3.86-7.17V80A8,8,0,0,0,250,72.25Z"];
     };
+    readonly play: {
+        readonly regular: readonly ["M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"];
+        readonly fill: readonly ["M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z"];
+    };
     readonly link: {
         readonly regular: readonly ["M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"];
         readonly fill: readonly ["M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM115.7,192.49a43.31,43.31,0,0,1-55-66.43l25.37-25.37a43.35,43.35,0,0,1,61.25,0,42.9,42.9,0,0,1,9.95,15.43,8,8,0,1,1-15,5.6A27.33,27.33,0,0,0,97.37,112L72,137.37a27.32,27.32,0,0,0,34.68,41.91,8,8,0,1,1,9,13.21Zm79.61-62.55-25.37,25.37A43,43,0,0,1,139.32,168h0a43.35,43.35,0,0,1-40.53-28.12,8,8,0,1,1,15-5.6A27.35,27.35,0,0,0,139.28,152h0a27.14,27.14,0,0,0,19.32-8L184,118.63a27.32,27.32,0,0,0-34.68-41.91,8,8,0,1,1-9-13.21,43.32,43.32,0,0,1,55,66.43Z"];

package/dist/components/icon/icon-props.d.ts

@@ -1,6 +1,6 @@
 /** 꺼짐은 선(regular), 켜짐·강조는 채움(fill) */
 export declare const weight: readonly ["regular", "fill"];
-export declare const sizes: readonly ["s", "m", "l"];
+export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare const iconProps: {
-    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["xs", "s", "m", "l", "xl"]>;
 };

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

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: ("link" | "image" | "x" | "copy" | "warning" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
+            options: ("link" | "image" | "x" | "copy" | "warning" | "play" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
         };
         weight: {
             control: {
@@ -19,7 +19,7 @@ declare const meta: {
             control: {
                 type: "inline-radio";
             };
-            options: readonly ["s", "m", "l"];
+            options: readonly ["xs", "s", "m", "l", "xl"];
         };
     };
     args: {

package/dist/components/logging/log-context.d.ts

@@ -0,0 +1,9 @@
+import { LogEvent, LogProviderProps } from './logging-type';
+type Emit = (event: LogEvent) => void;
+export declare const LogProvider: {
+    (props: LogProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** LogProvider 가 둔 emit 함수. Provider 밖이면 null 이다. */
+export declare const useLogEmitter: () => Emit | null;
+export {};

package/dist/components/logging/logging-type.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+/** 디자인시스템 컴포넌트가 내보내는 행동 이름. 수동 로그(useLog)는 다른 문자열도 쓸 수 있다. */
+export type LogAction = 'click' | 'open' | 'close' | 'change' | 'show' | 'navigate';
+export interface LogEvent {
+    /** 컴포넌트 displayName. 수동 로그는 화면·모듈 이름 */
+    component: string;
+    action: LogAction | (string & {});
+    /** 쓰는 쪽이 준 식별자. 예: 'report/download' */
+    track: string;
+    /** 개발자가 정한 id 만 (탭 id, 칩 id, 옵션 value, 탭 바 id). 사용자가 입력한 글자는 절대 넣지 않는다 */
+    value?: string;
+    /** 쓰는 쪽이 trackProps 로 명시한 값 */
+    props?: Record<string, string | number | boolean>;
+    timestamp: number;
+}
+/** 상호작용 컴포넌트가 공개 Props 에 extends 하는 두 prop */
+export interface TrackProps {
+    /** 주면 이 컴포넌트의 상호작용이 LogProvider.onEvent 로 간다. 없으면 아무것도 보내지 않는다 */
+    track?: string;
+    trackProps?: LogEvent['props'];
+}
+export interface LogProviderProps {
+    onEvent: (event: LogEvent) => void;
+    children?: ReactNode;
+}

package/dist/components/logging/logging.d.ts

@@ -0,0 +1,5 @@
+import { LogEvent } from './logging-type';
+export { LogProvider } from './log-context';
+/** 컴포넌트 밖의 사용 로그를 남긴다. LogProvider 밖이면 아무것도 하지 않는다. */
+export declare const useLog: () => ((event: Omit<LogEvent, "timestamp">) => void);
+export type { LogEvent, LogAction, LogProviderProps, TrackProps } from './logging-type';

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./logging-type").LogProviderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onEvent: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 버튼을 누르거나 탭을 바꾸면 onEvent 가 받은 이벤트가 아래 목록 맨 위에 쌓인다. */
+export declare const Default: Story;

package/dist/components/modal/modal-type.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
 import { CTAButtonProps } from '../button/button-type';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './modal-props';
 export interface ModalRootProps {
     open?: boolean;
@@ -36,7 +37,7 @@ export interface ModalWithDoubleButtonProps {
     right: CTAButtonProps;
     size?: (typeof sizes)[number];
 }
-export interface ModalProps extends ModalRootProps, StyleProps {
+export interface ModalProps extends ModalRootProps, StyleProps, TrackProps {
     /** 있으면 `Modal.Trigger asChild` 로 감싸 클릭하면 열리는 요소가 된다. */
     trigger?: ReactElement;
     title: ReactNode;

package/dist/components/pagination/pagination-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './pagination-props';
 export interface PaginationRootProps extends ComponentPropsWithRef<'nav'> {
     disabled?: boolean;
@@ -9,7 +10,7 @@ export interface PaginationItemProps extends ComponentPropsWithRef<'button'> {
     disabled?: boolean;
 }
 export type PaginationEllipsisProps = ComponentPropsWithRef<'span'>;
-export interface PaginationProps extends PaginationRootProps {
+export interface PaginationProps extends PaginationRootProps, TrackProps {
     totalPages: number;
     page?: number;
     defaultPage?: number;

package/dist/components/radio/radio-type.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 export interface RadioRootProps {
     options: {
         id: string;
@@ -22,4 +23,5 @@ export interface RadioButtonProps extends ComponentPropsWithRef<'button'>, AsChi
 export interface RadioIndicatorProps extends HTMLAttributes<HTMLDivElement>, AsChildProps {
     id: string;
 }
-export type RadioProps = RadioRootProps;
+export interface RadioProps extends RadioRootProps, TrackProps {
+}

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,4 @@
-declare const Radio: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
+import { RadioProps } from './radio-type';
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLUListElement>>;
 export default Radio;
 export type { RadioProps } from './radio-type';

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./radio-type").RadioProps & import("react").RefAttributes<HTMLUListElement>>;
     args: {
         options: {
             id: string;

package/dist/components/switch/switch-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './switch-props';
 export interface SwitchRootProps extends Omit<ComponentPropsWithRef<'button'>, 'id' | 'onChange' | 'value'> {
     id: string;
@@ -13,7 +14,7 @@ export type SwitchThumbProps = ComponentPropsWithRef<'span'>;
 export interface SwitchLabelProps extends AsChildProps {
     className?: string;
 }
-export interface SwitchProps extends SwitchRootProps {
+export interface SwitchProps extends SwitchRootProps, TrackProps {
     label?: ReactNode;
     size?: (typeof sizes)[number];
 }

package/dist/components/table/table-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 export interface TableProps {
     children: React.ReactNode;
 }
@@ -23,7 +24,7 @@ type ColumnsType<T extends readonly RowItem[]> = Array<{
         onClickCell?: () => void;
     };
 }>;
-export interface DataTableProps<T extends readonly RowItem[]> {
+export interface DataTableProps<T extends readonly RowItem[]> extends TrackProps {
     rows: T;
     columns: ColumnsType<T>;
     fixedRowsIndex?: number;

package/dist/components/tabs/tabs-type.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { variant } from './tabs-props';
 export type TabsValue = string | null;
 export type TabsVariant = (typeof variant)[number];
@@ -10,7 +11,7 @@ export interface TabsItem {
     disabled?: boolean;
     leftIcon?: ReactNode;
 }
-export interface TabsProps extends StyleProps {
+export interface TabsProps extends StyleProps, TrackProps {
     items: TabsItem[];
     variant?: TabsVariant;
     value?: TabsValue;

package/dist/components/text-area/text-area-type.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { resize, sizes } from './text-area-props';
 export interface TextAreaRootProps {
     children: ReactNode;
@@ -20,7 +21,7 @@ export interface TextAreaHelperTextProps {
     text: ReactNode;
     className?: string;
 }
-export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'> {
+export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'>, TrackProps {
     size?: (typeof sizes)[number];
     width?: number | string;
     resize?: (typeof resize)[number];

package/dist/components/text-field/text-field-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './text-field-props';
 export interface TextFieldRootProps {
     children: React.ReactNode;
@@ -20,7 +21,7 @@ export interface TextFieldHelperTextProps {
     text: ReactNode;
     className?: string;
 }
-export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'> {
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'>, TrackProps {
     size: (typeof sizes)[number];
     width: number | string;
     leftIcon?: ReactNode;

package/dist/components/toast/toast-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { positions, variants } from './toast-props';
 export interface ToastProviderProps {
     children: ReactNode;
@@ -36,7 +37,7 @@ export interface ToastAction {
     onClick: () => void;
     altText: string;
 }
-export interface ToastProps extends Omit<ToastRootProps, 'children' | keyof StyleProps>, StyleProps {
+export interface ToastProps extends Omit<ToastRootProps, 'children' | keyof StyleProps>, StyleProps, TrackProps {
     title: ReactNode;
     description?: ReactNode;
     variant?: (typeof variants)[number];