podo-ui 1.1.14 → 1.2.0

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

@@ -1,5 +1,9 @@
 export type DatePickerMode = 'instant' | 'period';
-export type DatePickerType = 'date' | 'time' | 'datetime';
+export type DatePickerType = 'date' | 'time' | 'datetime' | 'hour';
+/** 시(hour) 표시 포맷: 24시간제 | 12시간제(오전/오후) */
+export type HourFormat = '24' | '12';
+/** 시(hour) 선택 간격 */
+export type HourStep = 1 | 2 | 3 | 4 | 6 | 12;
 /** 시간 값 (시, 분) */
 export interface TimeValue {
     hour: number;
@@ -73,12 +77,33 @@ export interface DatePickerProps {
     minDate?: Date | DateTimeLimit;
     /** 선택 가능한 최대 날짜 (Date 또는 { date, time }) */
     maxDate?: Date | DateTimeLimit;
-    /** 분 단위 선택 간격 (1, 5, 10, 15, 30) 기본값: 1 */
+    /** 분 단위 선택 간격 (1, 5, 10, 15, 30) 기본값: 1
+     *  type='hour'일 때는 무시됨 (분 컬럼이 렌더링되지 않음)
+     */
     minuteStep?: MinuteStep;
+    /**
+     * 시(hour) 표시 포맷 (type='hour'일 때만 유효)
+     * '24': 0~23시 (기본), '12': 오전/오후 1~12시
+     */
+    hourFormat?: HourFormat;
+    /**
+     * 선택 불가능한 시간 배열 (0~23, type='hour'일 때만 유효)
+     * hourFormat과 무관하게 항상 24시 기준 값
+     * 예: [0,1,2,3,4,5,22,23] → 새벽/심야 비활성
+     */
+    disabledHours?: number[];
+    /**
+     * 시(hour) 선택 간격 (type='hour'일 때만 유효)
+     * 예: hourStep=2 → 0,2,4,...,22 만 선택 가능
+     * 기본값: 1
+     */
+    hourStep?: HourStep;
     /**
      * 날짜/시간 표시 포맷
      * y: 년, m: 월, d: 일, h: 시, i: 분
      * 예시: "y-m-d", "y.m.d h:i", "y년 m월 d일 h시 i분"
+     * type='hour'에서는 이 prop이 무시되고, hourFormat에 따른
+     * 기본 라벨("h시" 또는 "오전/오후 h시")로 표시됨
      */
     format?: string;
     /**

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, hideNavArrow = false, direction = 'down', onReset, }) => {
+const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placeholder, disabled = false, showActions, align = 'left', className, disable, enable, minDate, maxDate, minuteStep = 1, hourFormat = '24', disabledHours, hourStep = 1, format, initialCalendar, yearRange, portal = false, quickSelect = false, hideNavArrow = false, direction = 'down', onReset, }) => {
     const [selectingPart, setSelectingPart] = useState(null);
     const [tempValue, setTempValue] = useState(value || {});
     const [navigationStep, setNavigationStep] = useState(() => {
@@ -526,7 +526,8 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
     const [dropdownMaxWidth, setDropdownMaxWidth] = useState(null);
     // 실제 드롭다운 열림 방향 ('up' | 'down'), direction='auto'일 때만 동적으로 변경
     const [resolvedDirection, setResolvedDirection] = useState(direction === 'up' ? 'up' : 'down');
-    const shouldShowActions = showActions ?? mode === 'period';
+    // hour-only는 native select 단일 입력이라 적용/초기화 액션이 필요 없음 → 즉시 commit
+    const shouldShowActions = showActions ?? (mode === 'period' && type !== 'hour');
     // 날짜 선택 시에만 드롭다운 표시 (시/분은 native select 사용)
     const isOpen = selectingPart === 'date' || selectingPart === 'endDate';
     // 드롭다운 max-width 계산 (드롭다운 위치 기준으로 남은 뷰포트 너비)
@@ -671,6 +672,14 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
         }
     }, [value?.date, value?.endDate, quickSelect, mode]);
     const formatPeriodText = () => {
+        // hour-only: date 없이 time 만으로 표시
+        if (type === 'hour') {
+            const startText = tempValue.time ? formatHourLabel(tempValue.time.hour) : '';
+            const endText = tempValue.endTime ? formatHourLabel(tempValue.endTime.hour) : '';
+            if (startText && endText)
+                return `${startText} ~ ${endText}`;
+            return startText;
+        }
         if (!tempValue.date)
             return '';
         // format prop이 있으면 사용
@@ -806,8 +815,14 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
         setNavOffset(0);
     };
     const handleReset = () => {
+        // 선택값만 비우고 팝오버는 열린 상태 유지
+        // selectingPart을 null로 두면 isOpen이 false가 되어 팝오버가 닫힘 → 'date'로 되돌려 시작일 입력 대기 상태 유지
         setTempValue({});
-        setSelectingPart(null);
+        setSelectingPart('date');
+        setActivePresetKey(null);
+        setNavigationStep(null);
+        setNavigationAnchor(null);
+        setNavOffset(0);
         onReset?.();
     };
     const handleApply = () => {
@@ -951,16 +966,40 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
             : `${date.getFullYear()} - ${String(date.getMonth() + 1).padStart(2, '0')} - ${String(date.getDate()).padStart(2, '0')}`;
         return (_jsx("button", { type: "button", className: `${styles.inputPart} ${isActive ? styles.active : ''}`, onClick: onClick, children: displayText }));
     };
+    // hour-only 모드: 24시간 기준 hour 값을 표시 라벨(한국어/12h) 로 변환
+    const formatHourLabel = (h) => {
+        if (hourFormat === '12') {
+            // 0시 → 오전 12시, 1~11시 → 오전 N시, 12시 → 오후 12시, 13~23시 → 오후 (N-12)시
+            const period = h < 12 ? '오전' : '오후';
+            const h12 = h % 12 === 0 ? 12 : h % 12;
+            return `${period} ${h12}시`;
+        }
+        return `${h}시`;
+    };
+    // hour-only 옵션 리스트 생성 (hourStep 적용)
+    const buildHourOptions = () => {
+        const step = hourStep ?? 1;
+        const list = [];
+        for (let h = 0; h < 24; h += step)
+            list.push(h);
+        return list;
+    };
     // Helper to render hour select
     const renderHourSelect = (time, part, isPlaceholder) => {
+        const isHourOnly = type === 'hour';
         const hour = time?.hour ?? 0;
-        const hours = Array.from({ length: 24 }, (_, i) => i);
+        const hours = isHourOnly
+            ? buildHourOptions()
+            : Array.from({ length: 24 }, (_, i) => i);
         const isEnd = part === 'endHour';
         const currentDate = isEnd ? tempValue.endDate : tempValue.date;
         // minDate/maxDate 시간 제한 계산
         const minLimit = minDate ? extractDateTimeLimit(minDate) : null;
         const maxLimit = maxDate ? extractDateTimeLimit(maxDate) : null;
         const isHourDisabled = (h) => {
+            // hour-only: disabledHours 우선 적용
+            if (isHourOnly && disabledHours && disabledHours.includes(h))
+                return true;
             if (!currentDate)
                 return false;
             // minDate와 같은 날짜인 경우
@@ -977,6 +1016,18 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
         };
         const handleChange = (e) => {
             const selectedHour = parseInt(e.target.value, 10);
+            // hour-only: 분은 항상 0으로 정규화, minuteStep/min,maxDate time 보정 모두 무시
+            if (isHourOnly) {
+                const newTime = { hour: selectedHour, minute: 0 };
+                const newValue = isEnd
+                    ? { ...tempValue, endTime: newTime }
+                    : { ...tempValue, time: newTime };
+                setTempValue(newValue);
+                if (!shouldShowActions) {
+                    onChange?.(newValue);
+                }
+                return;
+            }
             const currentTime = isEnd ? tempValue.endTime : tempValue.time;
             let newMinute = currentTime?.minute ?? 0;
             // 시간 변경 시 분이 범위를 벗어나면 자동 보정
@@ -1009,7 +1060,11 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
                 onChange?.(newValue);
             }
         };
-        return (_jsx("select", { className: `${styles.timeSelect} ${isPlaceholder ? styles.placeholder : ''}`, value: hour, onChange: handleChange, disabled: disabled, children: hours.map((h) => (_jsx("option", { value: h, disabled: isHourDisabled(h), children: String(h).padStart(2, '0') }, h))) }));
+        // hour-only: 현재 값이 옵션 리스트에 없으면 가장 가까운 옵션으로 표시
+        const displayHour = isHourOnly && !hours.includes(hour)
+            ? (hours.reduce((prev, curr) => Math.abs(curr - hour) < Math.abs(prev - hour) ? curr : prev, hours[0] ?? 0))
+            : hour;
+        return (_jsx("select", { className: `${styles.timeSelect} ${isHourOnly ? styles.hourSelect : ''} ${isPlaceholder ? styles.placeholder : ''}`, value: displayHour, onChange: handleChange, disabled: disabled, "aria-label": isHourOnly ? '시간 선택' : undefined, children: hours.map((h) => (_jsx("option", { value: h, disabled: isHourDisabled(h), children: isHourOnly ? formatHourLabel(h) : String(h).padStart(2, '0') }, h))) }));
     };
     // Helper to render minute select
     const renderMinuteSelect = (time, part, isPlaceholder) => {
@@ -1086,6 +1141,13 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
             }
             return (_jsx("div", { className: styles.inputContent, children: _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] }) }));
         }
+        if (type === 'hour') {
+            // hour-only 모드: 분 컬럼/구분자 제거, 시 컬럼만 렌더
+            if (mode === 'period') {
+                return (_jsxs("div", { className: styles.inputContent, children: [_jsx("div", { className: `${styles.timeSection} ${styles.hourSection}`, children: renderHourSelect(displayValue?.time, 'hour', !hasStartTime) }), _jsx("span", { className: styles.separator, children: "~" }), _jsx("div", { className: `${styles.timeSection} ${styles.hourSection}`, children: renderHourSelect(displayValue?.endTime, 'endHour', !hasEndTime) })] }));
+            }
+            return (_jsx("div", { className: styles.inputContent, children: _jsx("div", { className: `${styles.timeSection} ${styles.hourSection}`, children: renderHourSelect(displayValue?.time, 'hour', !hasStartTime) }) }));
+        }
         // datetime
         if (mode === 'period') {
             return (_jsxs("div", { className: styles.inputContent, children: [renderDateButton(displayValue?.date, selectingPart === 'date', () => handlePartClick('date'), !hasStartValue), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.time, 'hour', !hasStartTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.time, 'minute', !hasStartTime)] }), _jsx("span", { className: styles.separator, children: "~" }), renderDateButton(displayValue?.endDate, selectingPart === 'endDate', () => handlePartClick('endDate'), !hasEndValue), _jsxs("div", { className: styles.timeSection, children: [renderHourSelect(displayValue?.endTime, 'endHour', !hasEndTime), _jsx("span", { className: styles.timeSeparator, children: ":" }), renderMinuteSelect(displayValue?.endTime, 'endMinute', !hasEndTime)] })] }));
@@ -1114,8 +1176,8 @@ const DatePicker = ({ mode = 'instant', type = 'date', value, onChange, placehol
         }
         return null;
     };
-    // 아이콘 결정 (time 타입은 icon-time, 나머지는 icon-calendar)
-    const inputIcon = type === 'time' ? 'icon-time' : 'icon-calendar';
+    // 아이콘 결정 (time/hour 타입은 icon-time, 나머지는 icon-calendar)
+    const inputIcon = type === 'time' || type === 'hour' ? 'icon-time' : 'icon-calendar';
     // 드롭다운 콘텐츠 렌더링
     const renderDropdown = () => {
         const dropdownContent = (_jsxs(_Fragment, { children: [renderDropdownContent(), shouldShowActions && (_jsxs("div", { className: styles.bottomActions, children: [_jsx("span", { className: styles.periodText, children: mode === 'period' && tempValue.date ? formatPeriodText() : '' }), _jsxs("div", { className: styles.actionButtons, children: [_jsxs("button", { type: "button", className: `${styles.actionButton} ${styles.reset}`, onClick: handleReset, children: [_jsx("i", { className: "icon-refresh" }), "\uCD08\uAE30\uD654"] }), _jsx("button", { type: "button", className: `${styles.actionButton} ${styles.apply}`, onClick: handleApply, children: "\uC801\uC6A9" })] })] }))] }));

package/dist/react/molecule/datepicker.module.scss

@@ -130,6 +130,12 @@
   gap: 0;
 }
 
+// hour-only 모드: 분 컬럼이 제거되므로 단일 select가 충분한 너비 확보
+.hourSection {
+  flex: 1;
+  min-width: 0;
+}
+
 .timeSelect {
   @include p4;
   appearance: none;
@@ -166,6 +172,14 @@
   }
 }
 
+// hour-only select: 한국어 라벨("3시"/"오전 3시")을 위한 너비 확보
+.hourSelect {
+  // 12h 라벨 "오전 12시" 폭 + 여백 정도
+  min-width: 72px;
+  text-align: center;
+  text-align-last: center;
+}
+
 .timeSeparator {
   @include p4;
   color: color('text-body');

package/dist/svelte/molecule/DatePicker.svelte

@@ -4,7 +4,13 @@
 
   // Types
   export type DatePickerMode = 'instant' | 'period';
-  export type DatePickerType = 'date' | 'time' | 'datetime';
+  export type DatePickerType = 'date' | 'time' | 'datetime' | 'hour';
+
+  /** 시(hour) 표시 포맷: 24시간제 | 12시간제(오전/오후) */
+  export type HourFormat = '24' | '12';
+
+  /** 시(hour) 선택 간격 */
+  export type HourStep = 1 | 2 | 3 | 4 | 6 | 12;
 
   export interface TimeValue {
     hour: number;
@@ -194,9 +200,15 @@
     minDate?: Date | DateTimeLimit;
     /** Maximum selectable date */
     maxDate?: Date | DateTimeLimit;
-    /** Minute selection step */
+    /** Minute selection step. Ignored when type='hour'. */
     minuteStep?: MinuteStep;
-    /** Date/time format pattern */
+    /** Hour display format (type='hour' only). '24': 0~23시, '12': 오전/오후 표기. Default '24'. */
+    hourFormat?: HourFormat;
+    /** Hours (0-23) that cannot be selected (type='hour' only). Always 24h reference. */
+    disabledHours?: number[];
+    /** Step interval for hour options (type='hour' only). Default 1. */
+    hourStep?: HourStep;
+    /** Date/time format pattern. Ignored when type='hour'. */
     format?: string;
     /** Initial calendar display month for period mode */
     initialCalendar?: InitialCalendar;
@@ -227,6 +239,9 @@
     minDate,
     maxDate,
     minuteStep = 1,
+    hourFormat = '24',
+    disabledHours,
+    hourStep = 1,
     format,
     initialCalendar,
     yearRange,
@@ -255,14 +270,33 @@
   const today = new Date();
 
   // Computed
-  const shouldShowActions = $derived(showActions ?? mode === 'period');
+  // hour-only는 native select 단일 입력이라 적용/초기화 액션이 필요 없음 → 즉시 commit
+  const shouldShowActions = $derived(showActions ?? (mode === 'period' && type !== 'hour'));
   const isOpen = $derived(selectingPart === 'date' || selectingPart === 'endDate');
   const displayValue = $derived(shouldShowActions ? tempValue : value);
   const hasStartValue = $derived(!!displayValue?.date);
   const hasEndValue = $derived(!!displayValue?.endDate);
-  const inputIcon = $derived(type === 'time' ? 'icon-time' : 'icon-calendar');
+  const inputIcon = $derived(type === 'time' || type === 'hour' ? 'icon-time' : 'icon-calendar');
   const showNavigation = $derived(quickSelect && mode === 'period' && !hideNavArrow);
 
+  // hour-only 라벨 (24h="3시", 12h="오전 3시")
+  const formatHourLabel = (h: number): string => {
+    if (hourFormat === '12') {
+      const period = h < 12 ? '오전' : '오후';
+      const h12 = h % 12 === 0 ? 12 : h % 12;
+      return `${period} ${h12}시`;
+    }
+    return `${h}시`;
+  };
+
+  // hour-only 옵션 리스트 (hourStep 적용)
+  const buildHourOptions = (): number[] => {
+    const step = hourStep ?? 1;
+    const list: number[] = [];
+    for (let h = 0; h < 24; h += step) list.push(h);
+    return list;
+  };
+
   // 드롭다운 방향 결정 (direction='auto'일 때 공간 측정)
   let resolvedDirection = $state<'up' | 'down'>(direction === 'up' ? 'up' : 'down');
   $effect(() => {
@@ -533,6 +567,14 @@
 
   // Format display
   const formatPeriodText = () => {
+    // hour-only: date 없이 time 만으로 표시
+    if (type === 'hour') {
+      const startText = tempValue.time ? formatHourLabel(tempValue.time.hour) : '';
+      const endText = tempValue.endTime ? formatHourLabel(tempValue.endTime.hour) : '';
+      if (startText && endText) return `${startText} ~ ${endText}`;
+      return startText;
+    }
+
     if (!tempValue.date) return '';
 
     if (format) {
@@ -790,8 +832,14 @@
   };
 
   const handleReset = () => {
+    // 선택값만 비우고 팝오버는 열린 상태 유지
+    // selectingPart을 null로 두면 isOpen이 false가 되어 팝오버가 닫힘 → 'date'로 되돌려 시작일 입력 대기 상태 유지
     tempValue = {};
-    selectingPart = null;
+    selectingPart = 'date';
+    activePresetKeyState = null;
+    navigationStep = null;
+    navigationAnchor = null;
+    navOffset = 0;
     onreset?.();
   };
 
@@ -841,7 +889,10 @@
     const target = e.target as HTMLSelectElement;
     const hour = parseInt(target.value);
     const currentTime = isEnd ? tempValue.endTime : tempValue.time;
-    const newTime: TimeValue = { hour, minute: currentTime?.minute ?? 0 };
+    // hour-only: 분을 0으로 정규화
+    const newTime: TimeValue = type === 'hour'
+      ? { hour, minute: 0 }
+      : { hour, minute: currentTime?.minute ?? 0 };
 
     const newValue = isEnd
       ? { ...tempValue, endTime: newTime }
@@ -870,9 +921,22 @@
   };
 
   // Time select options
-  const hours = Array.from({ length: 24 }, (_, i) => i);
+  // type='hour'면 hourStep 기반 옵션, 아니면 0~23 전체
+  const hours = $derived<number[]>(type === 'hour' ? buildHourOptions() : Array.from({ length: 24 }, (_, i) => i));
   const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
 
+  // hour-only: 옵션에 비활성 여부 (disabledHours + min/maxDate time)
+  const isHourOptionDisabled = (h: number, isEnd = false): boolean => {
+    if (type === 'hour' && disabledHours && disabledHours.includes(h)) return true;
+    const currentDate = isEnd ? tempValue.endDate : tempValue.date;
+    if (!currentDate) return false;
+    const minLimit = minDate ? (minDate instanceof Date ? { date: minDate } : minDate) : null;
+    const maxLimit = maxDate ? (maxDate instanceof Date ? { date: maxDate } : maxDate) : null;
+    if (minLimit?.time && isSameDay(currentDate, minLimit.date) && h < minLimit.time.hour) return true;
+    if (maxLimit?.time && isSameDay(currentDate, maxLimit.date) && h > maxLimit.time.hour) return true;
+    return false;
+  };
+
   // Calendar cell class computation
   const getCellClass = (dayInfo: { day: number; date: Date; isOther: boolean; isDisabled: boolean }) => {
     const { date, isOther, isDisabled } = dayInfo;
@@ -991,6 +1055,50 @@
             {formatDateDisplay(displayValue?.date)}
           </button>
         {/if}
+      {:else if type === 'hour'}
+        {#if mode === 'period'}
+          <div class="{styles.timeSection} {styles.hourSection}">
+            <select
+              class="{styles.timeSelect} {styles.hourSelect} {!displayValue?.time ? styles.placeholder : ''}"
+              value={displayValue?.time?.hour ?? 0}
+              onchange={(e) => handleHourChange(e, false)}
+              {disabled}
+              aria-label="시간 선택"
+            >
+              {#each hours as h}
+                <option value={h} disabled={isHourOptionDisabled(h, false)}>{formatHourLabel(h)}</option>
+              {/each}
+            </select>
+          </div>
+          <span class={styles.separator}>~</span>
+          <div class="{styles.timeSection} {styles.hourSection}">
+            <select
+              class="{styles.timeSelect} {styles.hourSelect} {!displayValue?.endTime ? styles.placeholder : ''}"
+              value={displayValue?.endTime?.hour ?? 0}
+              onchange={(e) => handleHourChange(e, true)}
+              {disabled}
+              aria-label="종료 시간 선택"
+            >
+              {#each hours as h}
+                <option value={h} disabled={isHourOptionDisabled(h, true)}>{formatHourLabel(h)}</option>
+              {/each}
+            </select>
+          </div>
+        {:else}
+          <div class="{styles.timeSection} {styles.hourSection}">
+            <select
+              class="{styles.timeSelect} {styles.hourSelect} {!displayValue?.time ? styles.placeholder : ''}"
+              value={displayValue?.time?.hour ?? 0}
+              onchange={(e) => handleHourChange(e, false)}
+              {disabled}
+              aria-label="시간 선택"
+            >
+              {#each hours as h}
+                <option value={h} disabled={isHourOptionDisabled(h, false)}>{formatHourLabel(h)}</option>
+              {/each}
+            </select>
+          </div>
+        {/if}
       {:else if type === 'time'}
         {#if mode === 'period'}
           <div class={styles.timeSection}>

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

@@ -1,5 +1,9 @@
 export type DatePickerMode = 'instant' | 'period';
-export type DatePickerType = 'date' | 'time' | 'datetime';
+export type DatePickerType = 'date' | 'time' | 'datetime' | 'hour';
+/** 시(hour) 표시 포맷: 24시간제 | 12시간제(오전/오후) */
+export type HourFormat = '24' | '12';
+/** 시(hour) 선택 간격 */
+export type HourStep = 1 | 2 | 3 | 4 | 6 | 12;
 export interface TimeValue {
     hour: number;
     minute: number;
@@ -58,9 +62,15 @@ interface Props {
     minDate?: Date | DateTimeLimit;
     /** Maximum selectable date */
     maxDate?: Date | DateTimeLimit;
-    /** Minute selection step */
+    /** Minute selection step. Ignored when type='hour'. */
     minuteStep?: MinuteStep;
-    /** Date/time format pattern */
+    /** Hour display format (type='hour' only). '24': 0~23시, '12': 오전/오후 표기. Default '24'. */
+    hourFormat?: HourFormat;
+    /** Hours (0-23) that cannot be selected (type='hour' only). Always 24h reference. */
+    disabledHours?: number[];
+    /** Step interval for hour options (type='hour' only). Default 1. */
+    hourStep?: HourStep;
+    /** Date/time format pattern. Ignored when type='hour'. */
     format?: string;
     /** Initial calendar display month for period mode */
     initialCalendar?: InitialCalendar;

package/package.json

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

package/public/ai/components/datepicker.json

@@ -5,11 +5,12 @@
   "documentation": "https://podoui.com/components/datepicker",
   "import": {
     "react": "import { DatePicker } from 'podo-ui'",
+    "svelte": "import { DatePicker } from 'podo-ui/svelte'",
     "vanilla": "import 'podo-ui/vanilla/datepicker'"
   },
   "props": [
     { "name": "mode", "type": "'instant' | 'period'", "default": "'instant'", "description": "Single date or date range" },
-    { "name": "type", "type": "'date' | 'time' | 'datetime'", "default": "'date'" },
+    { "name": "type", "type": "'date' | 'time' | 'datetime' | 'hour'", "default": "'date'", "description": "Value type. 'hour' renders only an hour selector (no minutes)." },
     { "name": "value", "type": "DatePickerValue", "required": false },
     { "name": "onChange", "type": "(value: DatePickerValue) => void", "required": false },
     { "name": "placeholder", "type": "string", "required": false },
@@ -20,8 +21,11 @@
     { "name": "enable", "type": "DateCondition[]", "required": false, "description": "Only enable specific dates" },
     { "name": "minDate", "type": "Date | DateTimeLimit", "required": false },
     { "name": "maxDate", "type": "Date | DateTimeLimit", "required": false },
-    { "name": "minuteStep", "type": "1 | 5 | 10 | 15 | 20 | 30", "default": "1" },
-    { "name": "format", "type": "string", "required": false, "description": "Custom format: y-m-d h:i" },
+    { "name": "minuteStep", "type": "1 | 5 | 10 | 15 | 20 | 30", "default": "1", "description": "Ignored when type='hour' (no minute column rendered)." },
+    { "name": "hourFormat", "type": "'24' | '12'", "default": "'24'", "required": false, "description": "Hour display format (type='hour' only). '24' shows 0시~23시, '12' shows 오전/오후 1~12시." },
+    { "name": "disabledHours", "type": "number[]", "required": false, "description": "Hours (0-23) that cannot be selected (type='hour' only). Always uses 24h reference values regardless of hourFormat." },
+    { "name": "hourStep", "type": "1 | 2 | 3 | 4 | 6 | 12", "default": "1", "required": false, "description": "Step interval for hour options (type='hour' only). e.g., hourStep=2 → 0,2,4,...,22." },
+    { "name": "format", "type": "string", "required": false, "description": "Custom format: y-m-d h:i. Ignored when type='hour' (use hourFormat instead)." },
     { "name": "initialCalendar", "type": "{ start?: CalendarInitial, end?: CalendarInitial }", "required": false, "description": "Initial calendar display month for left/right calendars. When specified, takes priority over value.date/value.endDate so the calendar opens at the explicitly requested month. CalendarInitial: 'now' | 'prevMonth' | 'nextMonth' | Date" },
     { "name": "yearRange", "type": "YearRange", "required": false, "description": "Year selection range (default: ±100 years from current year, takes priority over minDate/maxDate)" },
     { "name": "quickSelect", "type": "boolean", "default": "false", "required": false, "description": "Show quick select preset panel with common date ranges (period mode only). Presets: today, yesterday, this week, last week, last 7/30 days, this/last month. Disabled presets based on minDate/maxDate. When quickSelect=true and mode='period', left/right arrow navigation buttons appear around the input. Arrows shift the selected range by the preset unit (e.g., 7 days for weekly) or by the manually selected range size. Arrows are disabled when no range is selected or when shifting would exceed minDate/maxDate." },
@@ -67,6 +71,26 @@
     {
       "title": "Quick Select with arrow navigation",
       "code": "<DatePicker mode=\"period\" quickSelect />"
+    },
+    {
+      "title": "Hour-only (24h)",
+      "code": "<DatePicker type=\"hour\" value={{ time: { hour: 9, minute: 0 } }} onChange={(v) => setHour(v.time?.hour ?? null)} />"
+    },
+    {
+      "title": "Hour-only (12h)",
+      "code": "<DatePicker type=\"hour\" hourFormat=\"12\" value={value} onChange={setValue} />"
+    },
+    {
+      "title": "Hour-only with disabled hours (no midnight/early morning)",
+      "code": "<DatePicker type=\"hour\" disabledHours={[0, 1, 2, 3, 4, 5, 22, 23]} value={value} onChange={setValue} />"
+    },
+    {
+      "title": "Hour-only with step (every 2 hours)",
+      "code": "<DatePicker type=\"hour\" hourStep={2} value={value} onChange={setValue} />"
+    },
+    {
+      "title": "Hour range (period)",
+      "code": "<DatePicker type=\"hour\" mode=\"period\" value={value} onChange={setValue} />"
     }
   ],
   "related": ["field", "input"]

package/public/ai.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "1.1.14",
+  "version": "1.2.0",
   "description": "Design system: SCSS + React + Svelte 5",
   "philosophy": "Maximum flexibility with minimal JS dependency",
   "install": "npm install podo-ui",

package/vanilla/datepicker.css

@@ -135,6 +135,19 @@
   gap: 0;
 }
 
+/* hour-only 모드: 분 컬럼이 제거되므로 단일 select가 충분한 너비 확보 */
+.podo-datepicker__hour-section {
+  flex: 1;
+  min-width: 0;
+}
+
+/* hour-only select: "오전 12시"~"오후 11시" 라벨 폭 확보 */
+.podo-datepicker__hour-select {
+  min-width: 72px;
+  text-align: center;
+  text-align-last: center;
+}
+
 .podo-datepicker__time-select {
   appearance: none;
   -webkit-appearance: none;