@telepix-lab/telepix-ui 0.6.9 → 0.7.0

package/dist/cjs/button/index.d.ts

@@ -24,3 +24,15 @@ export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAtt
  * ```
  */
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
+ * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <ButtonTextDim>자세히 보기</ButtonTextDim>
+ * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * ```
+ */
+export declare const ButtonTextDim: React.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "variant">, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/button/types.d.ts

@@ -15,5 +15,6 @@ export declare const BUTTON_VARIANTS: {
     readonly OUTLINE_ACCENT: "outline_accent";
     readonly GHOST_ACCENT: "ghost_accent";
     readonly GHOST_DIM: "ghost_dim";
+    readonly TEXT_DIM: "text_dim";
 };
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];

package/dist/cjs/client.js

@@ -12345,11 +12345,19 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
         setChecked(value);
         onChange?.(value);
     };
-    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", wrapperClassName), children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(disabled
+    const handleWrapperClick = (e) => {
+        // CheckboxRadix.Root와 label은 자체 클릭 핸들러를 가지고 있으므로
+        // wrapper 영역(StateColorContainer 포함)을 직접 클릭한 경우에만 토글
+        if (disabled || e.target !== e.currentTarget)
+            return;
+        const currentChecked = defaultChecked ? checked : isChecked;
+        const newValue = !currentChecked;
+        onCheckedChange(newValue);
+    };
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", !disabled && "cursor-pointer", wrapperClassName), onClick: handleWrapperClick, children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(disabled
                     ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
                     : "") })] }));
 });
-Checkbox.displayName = "Checkbox";
 
 /**
  * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
@@ -13128,6 +13136,7 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
             weekday: "text-comp-mono-subtle-default text-body font-normal leading-body size-9 p-1",
             day: "p-1 bg-transparent",
             day_button: "size-8 rounded-md hover:bg-fill-hovered focus:outline-none text-body leading-3.5 font-medium text-comp-mono-default cursor-pointer",
+            disabled: "[&_button]:text-comp-disabled [&_button]:cursor-not-allowed [&_button]:hover:bg-transparent",
             selected: cn("[&_button]:bg-page-accent-l0 bg-transparent", props.mode === "single" &&
                 "[&_button]:text-comp-accent-default [&_button]:hover:bg-page-accent-l0"),
             outside: "[&_button]:text-comp-disabled",
@@ -13147,6 +13156,15 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) =
         }, ...props }));
 };
 
+var dayjs_min = {exports: {}};
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+} (dayjs_min));
+
+var dayjs_minExports = dayjs_min.exports;
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
 const BUTTON_SIZES = {
     REGULAR: "regular",
     SMALL: "small",
@@ -13154,7 +13172,9 @@ const BUTTON_SIZES = {
 };
 const BUTTON_VARIANTS = {
     ACCENT: "accent",
-    THUMBNAIL_GHOST: "thumbnail_ghost"};
+    THUMBNAIL_GHOST: "thumbnail_ghost",
+    TEXT_DIM: "text_dim",
+};
 
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
@@ -13172,6 +13192,13 @@ const BUTTON_VARIANTS = {
  */
 const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
     const getClassName = (size, variant) => {
+        // text_dim variant는 size에 관계없이 고정된 스타일 사용
+        if (variant === BUTTON_VARIANTS.TEXT_DIM) {
+            return [
+                "h-auto py-0.5 px-0 text-body leading-body-compact gap-1.5",
+                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default aria-selected:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
+            ];
+        }
         const sizeClassName = {
             small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
             regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
@@ -13188,6 +13215,7 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
             ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
             ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            text_dim: "", // 위에서 처리되므로 여기서는 빈 문자열
         }[variant];
         return [sizeClassName, variantClassName];
     };
@@ -13205,48 +13233,170 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "size-5";
         return "size-6"; // 기본값은 regular 크기
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName })), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
                     "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-} (dayjs_min));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }) => {
-    const [inputValue, setInputValue] = React.useState(value);
-    const [open, setOpen] = React.useState(openProp || false);
-    const handleSelect = (date) => {
-        if (mode === "single") {
-            const value = date;
-            onChange?.(value);
+/**
+ * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
+ * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <ButtonTextDim>자세히 보기</ButtonTextDim>
+ * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * ```
+ */
+const ButtonTextDim = React.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(Button, { ref: ref, variant: "text_dim", ...props });
+});
+ButtonTextDim.displayName = "ButtonTextDim";
+
+// Constants
+const CALENDAR_MODES = {
+    SINGLE: "single",
+    MULTIPLE: "multiple",
+    RANGE: "range",
+};
+const DEFAULT_FORMAT = "YYYY. MM. DD.";
+const DEFAULT_PLACEHOLDER = "Pick a date";
+const DatePicker = ({ size = "regular", placeholder = DEFAULT_PLACEHOLDER, format = DEFAULT_FORMAT, value, mode = CALENDAR_MODES.SINGLE, onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, minDate, maxDate, disabledDates, ...rest }) => {
+    // Determine if component is in controlled mode
+    // Using useRef to track initial controlled state (React's recommended approach)
+    const isControlledRef = React.useRef(value !== undefined);
+    const isControlled = isControlledRef.current;
+    const [internalValue, setInternalValue] = React.useState(value);
+    const [internalOpen, setInternalOpen] = React.useState(openProp ?? false);
+    const [lastInteractedDate, setLastInteractedDate] = React.useState(undefined);
+    // Use controlled value if provided, otherwise use internal state
+    const displayValue = isControlled ? value : internalValue;
+    const displayOpen = openProp !== undefined ? openProp : internalOpen;
+    // Update last interacted date based on mode and selected date
+    const updateLastInteractedDate = (date) => {
+        try {
+            if (mode === CALENDAR_MODES.RANGE &&
+                date &&
+                typeof date === "object" &&
+                "from" in date) {
+                const rangeValue = date;
+                if (rangeValue.to) {
+                    setLastInteractedDate(rangeValue.to);
+                }
+                else if (rangeValue.from) {
+                    setLastInteractedDate(rangeValue.from);
+                }
+            }
+            else if (mode === CALENDAR_MODES.SINGLE && date instanceof Date) {
+                setLastInteractedDate(date);
+            }
+            else if (mode === CALENDAR_MODES.MULTIPLE &&
+                Array.isArray(date) &&
+                date.length > 0) {
+                setLastInteractedDate(date[date.length - 1]);
+            }
         }
-        else if (mode === "multiple") {
-            const value = date;
-            onChange?.(value);
+        catch (error) {
+            console.warn("Error updating last interacted date:", error);
         }
-        else if (mode === "range") {
-            const value = date;
-            onChange?.(value);
+    };
+    const handleSelect = (date) => {
+        updateLastInteractedDate(date);
+        // Always call onChange to notify parent
+        onChange?.(date);
+        // Only update internal state in uncontrolled mode
+        if (!isControlled) {
+            setInternalValue(date);
         }
-        setInputValue(date);
-        if (isInstantClose && mode === "single") {
+        // Close popover if instant close is enabled (single mode only)
+        if (isInstantClose && mode === CALENDAR_MODES.SINGLE) {
             handleOpenChange(false);
         }
     };
+    // Calculate disabled dates based on minDate, maxDate, range validation, and custom disabled dates
+    // Using react-day-picker's native Matcher format for better performance
+    const isCalendarDisabled = React.useMemo(() => {
+        const matchers = [];
+        // Add minDate constraint using native 'before' matcher
+        if (minDate) {
+            matchers.push({ before: minDate });
+        }
+        // Add maxDate constraint using native 'after' matcher
+        if (maxDate) {
+            matchers.push({ after: maxDate });
+        }
+        // Range mode: when only 'from' is selected, disable all dates before it
+        if (mode === CALENDAR_MODES.RANGE &&
+            displayValue &&
+            typeof displayValue === "object" &&
+            "from" in displayValue) {
+            const rangeValue = displayValue;
+            if (rangeValue.from && !rangeValue.to) {
+                matchers.push({ before: rangeValue.from });
+            }
+        }
+        // Add custom disabled dates
+        if (disabledDates) {
+            if (Array.isArray(disabledDates)) {
+                matchers.push(...disabledDates);
+            }
+            else {
+                matchers.push(disabledDates);
+            }
+        }
+        // Return combined matchers (react-day-picker handles OR logic automatically)
+        return matchers.length > 0 ? matchers : undefined;
+    }, [minDate, maxDate, mode, displayValue, disabledDates]);
     const handleOpenChange = (open) => {
-        setOpen(open);
+        // Update internal state only in uncontrolled mode
+        if (openProp === undefined) {
+            setInternalOpen(open);
+        }
+        // Always notify parent
         onOpenChangeProp?.(open);
     };
+    // Calculate default month based on current value
+    const getDefaultMonth = () => {
+        try {
+            // For range mode, prioritize lastInteractedDate if available
+            if (mode === CALENDAR_MODES.RANGE && lastInteractedDate) {
+                return lastInteractedDate;
+            }
+            if (!displayValue) {
+                return undefined; // Use today's date as default when no value
+            }
+            if (mode === CALENDAR_MODES.SINGLE) {
+                return displayValue;
+            }
+            else if (mode === CALENDAR_MODES.MULTIPLE) {
+                const dates = displayValue;
+                if (dates.length > 0) {
+                    // Use the most recent date in the array
+                    return dates[dates.length - 1];
+                }
+            }
+            else if (mode === CALENDAR_MODES.RANGE) {
+                const range = displayValue;
+                // Use the most recent date (to) if available, otherwise use from
+                if (range.to) {
+                    return range.to;
+                }
+                else if (range.from) {
+                    return range.from;
+                }
+            }
+            return undefined;
+        }
+        catch (error) {
+            console.warn("Error calculating default month:", error);
+            return undefined;
+        }
+    };
+    // Memoize default month calculation for performance
+    const defaultMonth = React.useMemo(() => getDefaultMonth(), [mode, lastInteractedDate, displayValue]);
     const getDateToFormatString = (date) => {
         if (date instanceof Date) {
             return dayjs(date).format(format);
@@ -13254,15 +13404,17 @@ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "Y
         else if (Array.isArray(date)) {
             return date.map((d) => dayjs(d).format(format)).join(", ");
         }
-        else if (date &&
-            typeof date === "object" &&
-            "from" in date &&
-            "to" in date) {
-            return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
+        else if (date && typeof date === "object" && "from" in date) {
+            if (date.to) {
+                return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
+            }
+            return dayjs(date.from).format(format);
         }
         return placeholder ?? "";
     };
-    return (jsxRuntime.jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", "aria-selected": open, disabled: disabled, stateContainerClassName: open ? "group-aria-selected/state:bg-fill-default" : undefined, children: getDateToFormatString(inputValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
+    return (jsxRuntime.jsxs(Root2$2, { open: displayOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: "justify-start", "aria-selected": displayOpen, "aria-label": `Date picker, ${getDateToFormatString(displayValue) || placeholder}`, disabled: disabled, stateContainerClassName: displayOpen
+                        ? "group-aria-selected/state:bg-fill-default"
+                        : undefined, children: getDateToFormatString(displayValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", className: cn("z-10", popoverContentClassName), ...rest, children: mode === CALENDAR_MODES.SINGLE ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) : mode === CALENDAR_MODES.MULTIPLE ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(displayValue) ? displayValue : [], onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: displayValue, onSelect: handleSelect, disabled: isCalendarDisabled, defaultMonth: defaultMonth })) })] }));
 };
 
 const ContextMenu = Root2$3;

package/dist/cjs/date-picker/index.d.ts

@@ -1,6 +1,6 @@
 import { Popover } from "radix-ui";
+import { DateRange, Matcher } from "react-day-picker";
 import { CalendarProps } from "../calendar";
-import { DateRange } from "react-day-picker";
 type AllDatePickerTypes = Date | undefined | DateRange | Date[];
 interface DatePicker {
     size: "regular" | "large";
@@ -11,7 +11,21 @@ interface DatePicker {
     isInstantClose?: boolean;
     disabled?: boolean;
     popoverContentClassName?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /**
+     * Custom disabled dates matcher.
+     * Note: For optimal performance, memoize this prop in the parent component
+     * to avoid unnecessary recalculations.
+     *
+     * @example
+     * const disabledDates = useMemo(() => [
+     *   new Date(2025, 0, 15),
+     *   { from: new Date(2025, 1, 10), to: new Date(2025, 1, 15) }
+     * ], []);
+     */
+    disabledDates?: Matcher | Matcher[];
 }
-export type DatePickerProps = DatePicker & CalendarProps & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
-export declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export type DatePickerProps = DatePicker & Omit<CalendarProps, "disabled" | "selected" | "onSelect"> & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
+export declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, minDate, maxDate, disabledDates, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/index.d.ts

@@ -1,10 +1,11 @@
-export { Button } from "./button";
+export { Button, ButtonTextDim } from "./button";
 export { BUTTON_SIZES, BUTTON_VARIANTS } from "./button/types";
 export type { ButtonSize, ButtonVariant } from "./button/types";
 export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
 export { Input } from "./input";
 export { INPUT_SIZES, INPUT_VARIANTS } from "./input/types";
 export type { InputSize, InputVariant } from "./input/types";
+export { NotifyItem } from "./notify-item";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./pagination";
 export { StateColorContainer } from "./state-color-container";
 export type { StateGroupName } from "./state-color-container/types";

package/dist/cjs/index.js

@@ -3,24 +3,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-const BUTTON_SIZES = {
-    REGULAR: "regular",
-    SMALL: "small",
-    LARGE: "large",
-};
-const BUTTON_VARIANTS = {
-    ACCENT: "accent",
-    OUTLINE: "outline",
-    OUTLINE_TO_ACCENT: "outline_to_accent",
-    GHOST: "ghost",
-    THUMBNAIL_GHOST: "thumbnail_ghost",
-    GHOST_TO_ACCENT: "ghost_to_accent",
-    SUBTLE_FILLED: "subtle_filled",
-    OUTLINE_ACCENT: "outline_accent",
-    GHOST_ACCENT: "ghost_accent",
-    GHOST_DIM: "ghost_dim",
-};
-
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const CLASS_PART_SEPARATOR = '-';
@@ -3353,6 +3335,25 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
     return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0 rounded-[inherit]", actionClass, className) }));
 };
 
+const BUTTON_SIZES = {
+    REGULAR: "regular",
+    SMALL: "small",
+    LARGE: "large",
+};
+const BUTTON_VARIANTS = {
+    ACCENT: "accent",
+    OUTLINE: "outline",
+    OUTLINE_TO_ACCENT: "outline_to_accent",
+    GHOST: "ghost",
+    THUMBNAIL_GHOST: "thumbnail_ghost",
+    GHOST_TO_ACCENT: "ghost_to_accent",
+    SUBTLE_FILLED: "subtle_filled",
+    OUTLINE_ACCENT: "outline_accent",
+    GHOST_ACCENT: "ghost_accent",
+    GHOST_DIM: "ghost_dim",
+    TEXT_DIM: "text_dim",
+};
+
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
  * 사용자는 버튼의 변형(variant), 크기(size), 전체 너비(fullWidth), 로딩 상태(isLoading), 아이콘(leftIcon, rightIcon) 등을 지정할 수 있습니다.<br/>
@@ -3369,6 +3370,13 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
  */
 const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
     const getClassName = (size, variant) => {
+        // text_dim variant는 size에 관계없이 고정된 스타일 사용
+        if (variant === BUTTON_VARIANTS.TEXT_DIM) {
+            return [
+                "h-auto py-0.5 px-0 text-body leading-body-compact gap-1.5",
+                "bg-page-l-null text-comp-mono-subtle-default hover:text-comp-mono-default aria-selected:text-comp-mono-default disabled:bg-page-l-null disabled:text-comp-disabled disabled:hover:text-comp-disabled",
+            ];
+        }
         const sizeClassName = {
             small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
             regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
@@ -3385,6 +3393,7 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
             outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
             ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
             ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            text_dim: "", // 위에서 처리되므로 여기서는 빈 문자열
         }[variant];
         return [sizeClassName, variantClassName];
     };
@@ -3402,13 +3411,28 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "size-5";
         return "size-6"; // 기본값은 regular 크기
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", className), ...rest, children: [variant !== BUTTON_VARIANTS.TEXT_DIM && (jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName })), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
                     "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
 });
 Button.displayName = "Button";
+/**
+ * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
+ * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <ButtonTextDim>자세히 보기</ButtonTextDim>
+ * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * ```
+ */
+const ButtonTextDim = react.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(Button, { ref: ref, variant: "text_dim", ...props });
+});
+ButtonTextDim.displayName = "ButtonTextDim";
 
 /**
  * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
@@ -3739,6 +3763,28 @@ const Input = react.forwardRef(({ size = "regular", variant = "outlined", leftIc
 });
 Input.displayName = "Input";
 
+const NOTIFY_ITEM_VARIANTS = {
+    GHOST: "ghost",
+    DYNAMIC_ACCENT: "dynamicAccent",
+};
+const NotifyItem = react.forwardRef(({ title, description, timestamp, icon, actionIcon, variant = NOTIFY_ITEM_VARIANTS.GHOST, unread = false, disabled, className, ...rest }, ref) => {
+    return (jsxRuntime.jsxs("div", { ref: ref, "data-unread": unread, "data-disabled": disabled, className: cn("relative group/state inline-flex items-center min-h-9 w-full p-1.5 rounded cursor-pointer border border-transparent", variant === NOTIFY_ITEM_VARIANTS.GHOST && [
+            !disabled && "bg-page-l-null *:text-comp-mono-subtle-default",
+            "data-[unread=true]:border-border-bound data-[unread=true]:bg-page-l3 data-[unread=true]:*:text-comp-mono-default",
+        ], variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT && [
+            "bg-page-l4 *:text-comp-mono-default",
+            "data-[unread=true]:bg-page-accent-l0 data-[unread=true]:*:text-comp-accent-default",
+        ], disabled && [
+            "cursor-not-allowed pointer-events-none bg-page-l-null *:text-comp-disabled",
+        ], className), ...rest, children: [icon && (jsxRuntime.jsx("div", { className: "size-9 flex justify-center items-center flex-shrink-0", children: icon })), jsxRuntime.jsxs("div", { className: "flex-1 self-stretch px-1.5 inline-flex flex-col justify-center items-start gap-1 min-w-0 text-inherit", children: [jsxRuntime.jsx(Text, { variant: "medBodyMedCompact", className: "text-inherit", children: title }), jsxRuntime.jsx(Text, { variant: "regularLabelCompact", className: cn("text-inherit", variant === NOTIFY_ITEM_VARIANTS.GHOST &&
+                            "group-data-[unread=true]/state:text-comp-mono-subtle-default", variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT &&
+                            !disabled &&
+                            "group-data-[unread=false]/state:text-comp-mono-subtle-default"), children: description })] }), timestamp && (jsxRuntime.jsx("div", { className: "h-9 flex justify-center items-center flex-shrink-0", children: jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: cn("text-inherit", variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT &&
+                        !disabled &&
+                        "group-data-[unread=false]/state:text-comp-mono-subtle-default"), children: timestamp }) })), actionIcon && (jsxRuntime.jsx("div", { className: "size-9 flex justify-center items-center flex-shrink-0", children: actionIcon })), jsxRuntime.jsx(StateColorContainer, { groupName: "state", isInverted: variant === NOTIFY_ITEM_VARIANTS.DYNAMIC_ACCENT })] }));
+});
+NotifyItem.displayName = "NotifyItem";
+
 /**
  * @license lucide-react v0.513.0 - ISC
  *
@@ -3975,6 +4021,7 @@ TextArea.displayName = "TextArea";
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.BUTTON_VARIANTS = BUTTON_VARIANTS;
 exports.Button = Button;
+exports.ButtonTextDim = ButtonTextDim;
 exports.Card = Card;
 exports.CardBody = CardBody;
 exports.CardContent = CardContent;
@@ -3984,6 +4031,7 @@ exports.FONT_WEIGHTS = FONT_WEIGHTS;
 exports.INPUT_SIZES = INPUT_SIZES;
 exports.INPUT_VARIANTS = INPUT_VARIANTS;
 exports.Input = Input;
+exports.NotifyItem = NotifyItem;
 exports.Pagination = Pagination;
 exports.PaginationContent = PaginationContent;
 exports.PaginationEllipsis = PaginationEllipsis;

package/dist/cjs/notify-item/index.d.ts

@@ -0,0 +1,12 @@
+interface NotifyItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description: string;
+    timestamp?: string;
+    icon?: React.ReactNode;
+    actionIcon?: React.ReactNode;
+    variant?: "ghost" | "dynamicAccent";
+    unread?: boolean;
+    disabled?: boolean;
+}
+export declare const NotifyItem: import("react").ForwardRefExoticComponent<NotifyItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/client.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { ReactNode, FC, Ref } from 'react';
 import { RadioGroup as RadioGroup$1, Checkbox as Checkbox$1, Dialog as Dialog$1, Select as Select$1, Tooltip as Tooltip$1, Popover, ContextMenu as ContextMenu$1, Switch as Switch$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DayPicker, DateRange } from 'react-day-picker';
+import { DayPicker, DateRange, Matcher } from 'react-day-picker';
 
 declare const RADIO_GROUP_ORIENTAIONS: {
     readonly HORIZONTAL: "horizontal";
@@ -365,7 +365,7 @@ type CalendarProps = React$1.ComponentProps<typeof DayPicker>;
 declare const Calendar: ({ className, classNames, showOutsideDays, ...props }: CalendarProps) => react_jsx_runtime.JSX.Element;
 
 type AllDatePickerTypes = Date | undefined | DateRange | Date[];
-type DatePickerProps = DatePicker & CalendarProps & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
+type DatePickerProps = DatePicker & Omit<CalendarProps, "disabled" | "selected" | "onSelect"> & Popover.PopoverProps & Omit<Popover.PopoverContentProps, "className">;
 interface DatePicker {
     size: "regular" | "large";
     placeholder?: string;
@@ -375,8 +375,22 @@ interface DatePicker {
     isInstantClose?: boolean;
     disabled?: boolean;
     popoverContentClassName?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /**
+     * Custom disabled dates matcher.
+     * Note: For optimal performance, memoize this prop in the parent component
+     * to avoid unnecessary recalculations.
+     *
+     * @example
+     * const disabledDates = useMemo(() => [
+     *   new Date(2025, 0, 15),
+     *   { from: new Date(2025, 1, 10), to: new Date(2025, 1, 15) }
+     * ], []);
+     */
+    disabledDates?: Matcher | Matcher[];
 }
-declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ size, placeholder, format, value, mode, onChange, isInstantClose, open: openProp, onOpenChange: onOpenChangeProp, disabled, popoverContentClassName, minDate, maxDate, disabledDates, ...rest }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 declare const ContextMenu: FC<ContextMenu$1.ContextMenuProps>;
 declare const ContextMenuTrigger: FC<ContextMenu$1.ContextMenuTriggerProps>;