podo-ui 1.0.21 → 1.0.23

package/dist/react/atom/tooltip.d.ts

@@ -22,6 +22,8 @@ export interface TooltipProps {
      * 기본값: false
      */
     portal?: boolean;
+    /** 툴팁 최대 너비 (설정 시 자동 줄바꿈 활성화) */
+    maxWidth?: number | string;
 }
-export default function Tooltip({ children, content, variant, position, offset, isVisible: controlledIsVisible, className, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip({ children, content, variant, position, offset, isVisible: controlledIsVisible, className, portal, maxWidth, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/react/atom/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../react/atom/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,SAAS,GACT,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,MAAM,GACN,SAAS,GACT,YAAY,GACZ,OAAO,GACP,UAAU,GACV,aAAa,CAAC;AAElB,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAUD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,QAAgB,EAChB,MAAU,EACV,SAAS,EAAE,mBAAmB,EAC9B,SAAc,EACd,MAAc,GACf,EAAE,YAAY,2CAuLd"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../react/atom/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,SAAS,GACT,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,MAAM,GACN,SAAS,GACT,YAAY,GACZ,OAAO,GACP,UAAU,GACV,aAAa,CAAC;AAElB,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAUD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,QAAgB,EAChB,MAAU,EACV,SAAS,EAAE,mBAAmB,EAC9B,SAAc,EACd,MAAc,EACd,QAAQ,GACT,EAAE,YAAY,2CA2Ld"}

package/dist/react/atom/tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './tooltip.module.scss';
-export default function Tooltip({ children, content, variant = 'default', position = 'top', offset = 8, isVisible: controlledIsVisible, className = '', portal = false, }) {
+export default function Tooltip({ children, content, variant = 'default', position = 'top', offset = 8, isVisible: controlledIsVisible, className = '', portal = false, maxWidth, }) {
     const [hoverIsVisible, setHoverIsVisible] = useState(false);
     const triggerRef = useRef(null);
     const [portalPosition, setPortalPosition] = useState(null);
@@ -132,16 +132,19 @@ export default function Tooltip({ children, content, variant = 'default', positi
     ]
         .filter(Boolean)
         .join(' ');
+    const maxWidthStyle = maxWidth
+        ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, whiteSpace: 'normal', wordBreak: 'break-word' }
+        : {};
     // 툴팁 콘텐츠 렌더링
     const renderTooltipContent = () => {
         if (!shouldShowTooltip)
             return null;
         // Portal 모드
         if (portal && typeof document !== 'undefined' && portalPosition) {
-            return createPortal(_jsx("div", { className: portalTooltipClassNames, style: getPortalStyle(), children: content }), document.body);
+            return createPortal(_jsx("div", { className: portalTooltipClassNames, style: { ...getPortalStyle(), ...maxWidthStyle }, children: content }), document.body);
         }
         // 일반 모드
-        return (_jsx("div", { className: tooltipClassNames, style: { '--tooltip-offset': `${offset}px` }, children: content }));
+        return (_jsx("div", { className: tooltipClassNames, style: { '--tooltip-offset': `${offset}px`, ...maxWidthStyle }, children: content }));
     };
     return (_jsxs("div", { ref: triggerRef, className: styles.tooltipWrapper, onMouseEnter: () => setHoverIsVisible(true), onMouseLeave: () => setHoverIsVisible(false), children: [children, renderTooltipContent()] }));
 }

package/dist/react/molecule/datepicker.d.ts

@@ -105,6 +105,8 @@ export interface DatePickerProps {
      * 기본값: false
      */
     quickSelect?: boolean;
+    /** 초기화 버튼 클릭 시 콜백 */
+    onReset?: () => void;
 }
 declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/dist/react/molecule/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../react/molecule/datepicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../react/molecule/datepicker.tsx"],"names":[],"mappings":"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"}

package/dist/react/molecule/datepicker.js

@@ -475,7 +475,7 @@ const PeriodCalendar = ({ value, endValue, onSelect, viewDate, endViewDate, onVi
     return (_jsxs("div", { className: styles.periodCalendars, children: [_jsx("div", { className: styles.periodCalendarLeft, children: _jsx(Calendar, { value: value, endValue: endValue, mode: "period", onSelect: onSelect, viewDate: viewDate, onViewDateChange: onViewDateChange, showPrevNav: true, showNextNav: true, maxViewDate: isMobile ? undefined : endViewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate, yearRange: yearRange }) }), _jsx("div", { className: styles.periodCalendarRight, children: _jsx(Calendar, { value: value, endValue: endValue, mode: "period", onSelect: onSelect, viewDate: endViewDate, onViewDateChange: onEndViewDateChange, showPrevNav: true, showNextNav: true, minViewDate: viewDate, disable: disable, enable: enable, minDate: minDate, maxDate: maxDate, yearRange: yearRange }) })] }));
 };
 // Main DatePicker Component
-const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placeholder, disabled = false, showActions, align = 'left', className, disable, enable, minDate, maxDate, minuteStep = 1, format, initialCalendar, yearRange, portal = false, quickSelect = false, }) => {
+const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placeholder, disabled = false, showActions, align = 'left', className, disable, enable, minDate, maxDate, minuteStep = 1, format, initialCalendar, yearRange, portal = false, quickSelect = false, onReset, }) => {
     const [selectingPart, setSelectingPart] = useState(null);
     const [tempValue, setTempValue] = useState(value || {});
     const [navigationStep, setNavigationStep] = useState(() => {
@@ -757,6 +757,7 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
     const handleReset = () => {
         setTempValue({});
         setSelectingPart(null);
+        onReset?.();
     };
     const handleApply = () => {
         onChange?.(tempValue);

package/dist/react/molecule/pagination.d.ts

@@ -3,7 +3,11 @@ interface PaginationProps {
     totalPages: number;
     onPageChange: (page: number) => void;
     maxVisiblePages?: number;
+    /** Previous button icon class name */
+    prevIcon?: string;
+    /** Next button icon class name */
+    nextIcon?: string;
 }
-export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages, prevIcon, nextIcon, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=pagination.d.ts.map

package/dist/react/molecule/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../react/molecule/pagination.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,eAAmB,GACpB,EAAE,eAAe,kDAwEjB"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../react/molecule/pagination.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,WAAW,EACX,UAAU,EACV,YAAY,EACZ,eAAmB,EACnB,QAA4B,EAC5B,QAA6B,GAC9B,EAAE,eAAe,kDAwEjB"}

package/dist/react/molecule/pagination.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './pagination.module.scss';
-export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages = 5, }) {
+export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages = 5, prevIcon = 'icon-arrow-left', nextIcon = 'icon-arrow-right', }) {
     const getPageNumbers = () => {
         const pages = [];
         const startPage = Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
@@ -24,5 +24,5 @@ export default function Pagination({ currentPage, totalPages, onPageChange, maxV
     if (totalPages === 0) {
         return null;
     }
-    return (_jsxs("div", { className: styles.pagination, children: [currentPage > 1 ? (_jsx("button", { onClick: handlePrevious, className: styles.pageButton, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", children: _jsx("i", { className: "icon-arrow-left" }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder })), pageNumbers.map((pageNum) => (_jsx("button", { onClick: () => onPageChange(pageNum), className: `${styles.pageButton} ${currentPage === pageNum ? styles.active : ''}`, "aria-label": `${pageNum}페이지`, "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum))), currentPage < totalPages ? (_jsx("button", { onClick: handleNext, className: styles.pageButton, "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", children: _jsx("i", { className: "icon-arrow-right" }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder }))] }));
+    return (_jsxs("div", { className: styles.pagination, children: [currentPage > 1 ? (_jsx("button", { onClick: handlePrevious, className: styles.pageButton, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", children: _jsx("i", { className: prevIcon }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder })), pageNumbers.map((pageNum) => (_jsx("button", { onClick: () => onPageChange(pageNum), className: `${styles.pageButton} ${currentPage === pageNum ? styles.active : ''}`, "aria-label": `${pageNum}페이지`, "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum))), currentPage < totalPages ? (_jsx("button", { onClick: handleNext, className: styles.pageButton, "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", children: _jsx("i", { className: nextIcon }) })) : (_jsx("div", { className: styles.pageButtonPlaceholder }))] }));
 }

package/dist/svelte/atom/Tooltip.svelte

@@ -33,6 +33,8 @@
     isVisible?: boolean;
     /** Additional CSS class */
     class?: string;
+    /** Tooltip max width (enables word wrap when set) */
+    maxWidth?: number | string;
   }
 
   let {
@@ -43,6 +45,7 @@
     offset = 8,
     isVisible: controlledIsVisible,
     class: className = '',
+    maxWidth,
     ...rest
   }: Props & Record<string, unknown> = $props();
 
@@ -71,7 +74,7 @@
 >
   {@render children()}
   {#if shouldShowTooltip}
-    <div class={tooltipClassNames} style="--tooltip-offset: {offset}px;">
+    <div class={tooltipClassNames} style="--tooltip-offset: {offset}px;{maxWidth ? ` max-width: ${typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth}; white-space: normal; word-break: break-word;` : ''}">
       {@render content()}
     </div>
   {/if}

package/dist/svelte/atom/Tooltip.svelte.d.ts

@@ -16,6 +16,8 @@ interface Props {
     isVisible?: boolean;
     /** Additional CSS class */
     class?: string;
+    /** Tooltip max width (enables word wrap when set) */
+    maxWidth?: number | string;
 }
 type $$ComponentProps = Props & Record<string, unknown>;
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/svelte/molecule/DatePicker.svelte

@@ -204,6 +204,8 @@
     yearRange?: YearRange;
     /** Show quick select presets (period mode only) */
     quickSelect?: boolean;
+    /** Reset button click callback */
+    onreset?: () => void;
   }
 
   let {
@@ -225,6 +227,7 @@
     initialCalendar,
     yearRange,
     quickSelect = false,
+    onreset,
     ...rest
   }: Props & Record<string, unknown> = $props();
 
@@ -763,6 +766,7 @@
   const handleReset = () => {
     tempValue = {};
     selectingPart = null;
+    onreset?.();
   };
 
   const handleApply = () => {

package/dist/svelte/molecule/DatePicker.svelte.d.ts

@@ -68,6 +68,8 @@ interface Props {
     yearRange?: YearRange;
     /** Show quick select presets (period mode only) */
     quickSelect?: boolean;
+    /** Reset button click callback */
+    onreset?: () => void;
 }
 type $$ComponentProps = Props & Record<string, unknown>;
 declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/svelte/molecule/Pagination.svelte

@@ -10,6 +10,10 @@
     onpagechange: (page: number) => void;
     /** Maximum visible page numbers */
     maxVisiblePages?: number;
+    /** Previous button icon class name */
+    prevIcon?: string;
+    /** Next button icon class name */
+    nextIcon?: string;
   }
 
   let {
@@ -17,6 +21,8 @@
     totalPages,
     onpagechange,
     maxVisiblePages = 5,
+    prevIcon = 'icon-arrow-left',
+    nextIcon = 'icon-arrow-right',
     ...rest
   }: Props & Record<string, unknown> = $props();
 
@@ -63,7 +69,7 @@
         class={styles.pageButton}
         aria-label="이전 페이지"
       >
-        <i class="icon-arrow-left"></i>
+        <i class={prevIcon}></i>
       </button>
     {:else}
       <div class={styles.pageButtonPlaceholder}></div>
@@ -86,7 +92,7 @@
         class={styles.pageButton}
         aria-label="다음 페이지"
       >
-        <i class="icon-arrow-right"></i>
+        <i class={nextIcon}></i>
       </button>
     {:else}
       <div class={styles.pageButtonPlaceholder}></div>

package/dist/svelte/molecule/Pagination.svelte.d.ts

@@ -7,6 +7,10 @@ interface Props {
     onpagechange: (page: number) => void;
     /** Maximum visible page numbers */
     maxVisiblePages?: number;
+    /** Previous button icon class name */
+    prevIcon?: string;
+    /** Next button icon class name */
+    nextIcon?: string;
 }
 type $$ComponentProps = Props & Record<string, unknown>;
 declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "currentPage">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

package/scss/form/input.scss

@@ -42,7 +42,10 @@ input[type='datetime'] {
     }
   }
   &:read-only {
+    background-color: transparent;
     border: none;
+    color: inherit;
+    cursor: default;
   }
   &.success {
     &:not(:disabled):not(:read-only) {

package/scss/form/textarea.scss

@@ -23,7 +23,10 @@ textarea {
     border: 1px solid color('primary');
   }
   &:read-only {
+    background-color: transparent;
     border: none;
+    color: inherit;
+    cursor: default;
     resize: none;
   }
   &:focus-visible:not(:disabled) {

package/scss/icon/icon.scss

@@ -6,17 +6,10 @@
   src: url('./font/icon.woff') format('woff');
   font-display: swap;
 }
-:root {
-  [class^='icon-'],
-  [class*=' icon-'] {
-    &:only-child,
-    &:not(:last-child) {
-      margin-right: s(2);
-    }
-  }
 
-  [class^='icon-']::before,
-  [class*=' icon-']::before {
+[class^='icon-'],
+[class*=' icon-'] {
+  &::before {
     font-family: 'podo-ui-icon' !important;
     font-style: normal;
     font-weight: normal;
@@ -27,12 +20,11 @@
     vertical-align: inherit;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    // margin-top: -0.1rem;
   }
+}
 
-  @each $key, $value in $icon-name {
-    .icon-#{$key}::before {
-      content: '#{$value}';
-    }
+@each $key, $value in $icon-name {
+  .icon-#{$key}::before {
+    content: '#{$value}';
   }
 }

package/scss/typo/mixin.scss

@@ -9,9 +9,7 @@
   font-size: $font-size-54;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-24;
   }
@@ -21,9 +19,7 @@
   font-size: $font-size-42;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-18;
   }
@@ -33,9 +29,7 @@
   font-size: $font-size-36;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-16;
   }
@@ -48,9 +42,7 @@
   font-size: $font-size-60;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-36;
   }
@@ -59,9 +51,7 @@
   font-size: $font-size-54;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-32;
   }
@@ -70,9 +60,7 @@
   font-size: $font-size-48;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-28;
   }
@@ -81,9 +69,7 @@
   font-size: $font-size-42;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-24;
   }
@@ -93,9 +79,7 @@
   font-size: $font-size-36;
   line-height: 1.2;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-20;
   }
@@ -105,9 +89,7 @@
   font-size: $font-size-24;
   line-height: 1.4;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-18;
   }
@@ -117,9 +99,7 @@
   font-size: $font-size-20;
   line-height: 1.6;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-header);
-  }
+  color: var(--color-text-header);
   @include mo {
     font-size: $font-size-16;
   }
@@ -131,9 +111,7 @@
   font-size: $font-size-24;
   line-height: 1.4;
   font-weight: $font-weight-regular;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-20;
   }
@@ -142,9 +120,7 @@
   font-size: $font-size-20;
   line-height: 1.6;
   font-weight: $font-weight-regular;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-16;
   }
@@ -153,9 +129,7 @@
   font-size: $font-size-16;
   line-height: 1.6;
   font-weight: $font-weight-regular;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-14;
   }
@@ -165,9 +139,7 @@
   font-size: $font-size-16;
   line-height: 1.6;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-14;
   }
@@ -176,9 +148,7 @@
   font-size: $font-size-14;
   line-height: 1.6;
   font-weight: $font-weight-regular;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-12;
   }
@@ -187,9 +157,7 @@
   font-size: $font-size-14;
   line-height: 1.6;
   font-weight: $font-weight-semibold;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
   @include mo {
     font-size: $font-size-12;
   }
@@ -198,15 +166,11 @@
   font-size: $font-size-12;
   line-height: 1.6;
   font-weight: $font-weight-regular;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
 }
 @mixin p5-semibold {
   font-size: $font-size-12;
   line-height: 1.6;
   font-weight: 600;
-  &:not(button) {
-    color: var(--color-text-body);
-  }
+  color: var(--color-text-body);
 }

package/vanilla/datepicker.js

@@ -1532,6 +1532,9 @@
       this.tempValue = {};
       this.close();
       this.renderInputContent();
+      if (typeof this.options.onReset === 'function') {
+        this.options.onReset();
+      }
     }
 
     handleApply() {