stalefish 8.0.10 → 8.0.11

package/components/datePicker.mjs

@@ -0,0 +1,239 @@
+import { html, css, formField, fieldIsTouched, rerender } from 'halfcab'
+
+const styles = css`
+  .textfield {
+    padding: 10px;
+    border: solid 5px #c9c9c9;
+    transition: border 0.3s;
+    outline: none;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 0;
+    box-shadow: none !important;
+    font-weight: normal;
+    box-sizing: border-box;
+    font-family: inherit;
+    line-height: 1.4em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    z-index: 20;
+    position: relative;
+    height: 55px;
+    background-color: #FFF;
+  }
+
+  .label {
+    transition: opacity 0.75s;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    user-select: none;
+    position: absolute;
+    top: -55px;
+    z-index: 10;
+  }
+
+  .clear {
+    cursor: pointer;
+    position: absolute;
+    color: #AAA;
+    font-size: 0.8em;
+    line-height: 0.9em;
+    font-weight: normal;
+    box-sizing: border-box;
+    right: 40px;
+    background-color: #EEE;
+    padding: 5px 10px;
+    z-index: 30;
+    border-radius: 3px;
+    top: 17px;
+  }
+`
+
+const STATE_SYMBOL = Symbol.for('stalefish.date.state')
+const ID_MAP_SYMBOL = Symbol.for('stalefish.date.idMap')
+
+function pad2 (n) { return (n < 10 ? '0' : '') + n }
+function toYMD (d) { return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}` }
+function parseYMD (str) {
+  if (!str || typeof str !== 'string') return null
+  const m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str)
+  if (!m) return null
+  const y = parseInt(m[1], 10)
+  const mon = parseInt(m[2], 10) - 1
+  const day = parseInt(m[3], 10)
+  const d = new Date(y, mon, day)
+  if (d.getFullYear() !== y || d.getMonth() !== mon || d.getDate() !== day) return null
+  return d
+}
+function daysInMonth (y, m) { return new Date(y, m + 1, 0).getDate() }
+
+function ensureState (holdingPen, property) {
+  if (!holdingPen) return {}
+  if (!holdingPen[STATE_SYMBOL]) {
+    Object.defineProperty(holdingPen, STATE_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[STATE_SYMBOL]
+  if (!map[property]) {
+    map[property] = { open: false, viewMonth: null, viewYear: null, tmpDate: null }
+  }
+  return map[property]
+}
+
+function ensureId (holdingPen, property, uniqueKey) {
+  if (!holdingPen) return `sf-date-${property || Math.random().toString(36).slice(2)}`
+  if (!holdingPen[ID_MAP_SYMBOL]) {
+    Object.defineProperty(holdingPen, ID_MAP_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[ID_MAP_SYMBOL]
+  if (!map[property]) {
+    map[property] = `sf-date-${property}-${Math.random().toString(36).slice(2)}`
+  }
+  return `sf-date-${uniqueKey || map[property]}`
+}
+
+function buildCalendarUI ({ state, today, onPickDay, onPrevMonth, onNextMonth }) {
+  const y = state.viewYear
+  const m = state.viewMonth
+  const first = new Date(y, m, 1)
+  const startWeekday = first.getDay() // 0 Sun - 6 Sat
+  const dim = daysInMonth(y, m)
+  const cells = []
+  for (let i = 0; i < startWeekday; i++) cells.push(null)
+  for (let d = 1; d <= dim; d++) cells.push(d)
+  while (cells.length % 7 !== 0) cells.push(null)
+  const rows = []
+  for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7))
+  const header = html`<div style="display:flex; justify-content:space-between; align-items:center; padding: 6px 8px;">
+    <button type="button" onclick=${onPrevMonth} aria-label="Previous month">‹</button>
+    <div>${new Date(y, m, 1).toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
+    <button type="button" onclick=${onNextMonth} aria-label="Next month">›</button>
+  </div>`
+  const weekdayRow = html`<div style="display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding: 0 8px; opacity:0.7; font-size:12px;">
+    ${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => html`<div style="text-align:center;">${d}</div>`)}
+  </div>`
+  const grid = html`<div style="display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding: 8px;">
+    ${rows.map(week => week.map(d => {
+      if (!d) return html`<div></div>`
+      const isToday = today.getFullYear() === y && today.getMonth() === m && today.getDate() === d
+      const isSelected = state.tmpDate && state.tmpDate.getFullYear() === y && state.tmpDate.getMonth() === m && state.tmpDate.getDate() === d
+      return html`<button type="button" onclick=${() => onPickDay(d)} style="padding:6px; ${isSelected ? 'background:#007aff; color:#fff;' : ''} ${isToday ? 'border:1px solid #007aff;' : 'border:1px solid #ddd;'}">${d}</button>`
+    }))}
+  </div>`
+  return html`<div>${header}${weekdayRow}${grid}</div>`
+}
+
+function commitValue ({ holdingPen, property, onchange, valueStr }) {
+  const fauxE = { currentTarget: { validity: { valid: true }, value: valueStr } }
+  formField(holdingPen, property)(fauxE)
+  onchange && onchange(fauxE)
+}
+
+export default function datePicker ({
+  wrapperStyle = null,
+  holdingPen,
+  label,
+  placeholder,
+  property,
+  required,
+  pattern,
+  disabled,
+  disableClear = false,
+  onchange,
+  oninput,
+  uniqueKey
+} = {}) {
+  const wrapperId = ensureId(holdingPen, property, uniqueKey)
+  const state = ensureState(holdingPen, property)
+
+  const currentStr = holdingPen && property ? holdingPen[property] : ''
+  const now = new Date()
+  if (state.viewMonth === null || state.viewYear === null) {
+    const baseDate = parseYMD(currentStr) || now
+    state.viewMonth = baseDate.getMonth()
+    state.viewYear = baseDate.getFullYear()
+  }
+  if (!state.tmpDate) {
+    state.tmpDate = parseYMD(currentStr) || new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  }
+
+  const commit = () => {
+    const valueStr = state.tmpDate ? toYMD(state.tmpDate) : ''
+    commitValue({ holdingPen, property, onchange, valueStr })
+    state.open = false
+    rerender()
+  }
+
+  const clearValue = (e) => {
+    if (e) { e.stopPropagation(); e.preventDefault() }
+    commitValue({ holdingPen, property, onchange, valueStr: '' })
+    state.open = false
+    rerender()
+    return false
+  }
+
+  const onInputChange = (e) => {
+    // let them type YYYY-MM-DD; commit only if parsing succeeds
+    const v = (e?.target?.value || '').trim()
+    const d = parseYMD(v)
+    if (d) {
+      state.tmpDate = d
+      commit()
+    } else {
+      oninput && oninput(e)
+    }
+  }
+
+  const open = (e) => {
+    if (disabled) return
+    e && e.stopPropagation()
+    // Only toggle open on click to avoid focus+click double toggle flicker
+    state.open = !state.open
+    rerender()
+    if (typeof window !== 'undefined' && state.open) {
+      const closeOnOutside = (ev) => {
+        const wrapperEl = document.getElementById(wrapperId)
+        if (!wrapperEl) return
+        if (!wrapperEl.contains(ev.target)) {
+          state.open = false
+          rerender()
+          document.removeEventListener('mousedown', closeOnOutside, true)
+        }
+      }
+      // Defer attaching to next tick to avoid capturing the very click that opened
+      setTimeout(() => document.addEventListener('mousedown', closeOnOutside, true), 0)
+    }
+  }
+
+  const popup = state.open
+    ? html`<div role="dialog" aria-modal="false" style="position:absolute; z-index: 9999; top: 55px; left: 0; background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0,0,0,.15); padding: 4px;">
+        ${buildCalendarUI({
+          state,
+          today: new Date(),
+          onPickDay: (d) => { state.tmpDate = new Date(state.viewYear, state.viewMonth, d); rerender() },
+          onPrevMonth: () => { if (state.viewMonth === 0) { state.viewMonth = 11; state.viewYear -= 1 } else { state.viewMonth -= 1 }; rerender() },
+          onNextMonth: () => { if (state.viewMonth === 11) { state.viewMonth = 0; state.viewYear += 1 } else { state.viewMonth += 1 }; rerender() }
+        })}
+        <div style="display:flex; justify-content:flex-end; padding: 8px;"><button type="button" onclick=${commit}>Apply</button></div>
+      </div>`
+    : ''
+
+  const displayValue = currentStr || ''
+
+  return html`
+    <div id="${wrapperId}" class="${wrapperStyle}" style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
+      <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;" onclick=${e => e.stopPropagation()}>
+        ${label ? html`<span class="${styles.label}" style="opacity: ${(holdingPen && (holdingPen[property] === 0 || holdingPen[property])) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); position: absolute; top: -36px;">${label}${required ? ' *' : ''}</span>` : ''}
+        ${!disableClear ? html`<div data-clear class="${styles.clear}" onclick=${clearValue}>clear</div>` : ''}
+        <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''}
+          onclick=${open}
+          onchange=${onInputChange}
+          oninput=${onInputChange}
+          placeholder="${(placeholder || 'Date') + (required ? ' *' : '')}"
+          type="text" ${pattern ? { pattern } : ''}
+          .value=${displayValue} data-input />
+        ${popup}
+      </div>
+    </div>
+  `
+}

package/components/dateTimePicker.mjs

@@ -1,357 +1,21 @@
-import { html, css, formField, fieldIsTouched, rerender } from 'halfcab'
-import calendarIcon from './icons/calendarIcon.mjs'
-import timeIcon from './icons/timeIcon.mjs'
-
-const styles = css`
-  .textfield {
-    padding: 10px;
-    border: solid 5px #c9c9c9;
-    transition: border 0.3s;
-    outline: none;
-    width: 100%;
-    font-size: 18px;
-    border-radius: 0;
-    box-shadow: none !important;
-    font-weight: normal;
-    box-sizing: border-box;
-    font-family: inherit;
-    line-height: 1.4em;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    z-index: 20;
-    position: relative;
-    height: 55px;
-    background-color: #FFF;
-  }
-  
-  .label {
-    transition: opacity 0.75s;
-    border-top-right-radius: 5px; 
-    border-top-left-radius: 5px;
-    user-select: none;
-    position: absolute;
-    top: -55px;
-    z-index: 10;
-  }
-  
-  .textfield:focus {
-    border: solid 5px #969696;
-  }
-  
-  .textfield::placeholder {
-    color: #999;
-  }
-  
-  .textfield.touched:invalid:not(:focus) {
-    border-color: red;
-  }
-  
-  .icon {
-    position: absolute;
-    pointer-events: none;
-    color: #c9c9c9;
-    right: 12px;
-    font-size: 2em;
-    z-index: 30;
-    position: absolute; 
-    top: 9px; 
-  }
-  
-  .clear {
-    cursor: pointer;
-    position: absolute;
-    color: #AAA;
-    font-size: 0.8em; 
-    line-height: 0.9em;
-    font-weight: normal; 
-    box-sizing: border-box;
-    top: -1px; 
-    right: 40px; 
-    background-color: #EEE; 
-    padding: 5px 10px;
-    z-index: 30;
-    border-radius: 3px;
-    position: absolute; 
-    top: 17px; 
-  }
-`
-
-function change ({ e, holdingPen, property }) {
-  const ff = formField(holdingPen, property)(e)
-  // e.target.focus()
-  return ff
-}
-
-// Touchscreen detection is no longer needed in the native picker
-
-// --------------------
-// Native date/time picker implementation (no external libs)
-// --------------------
-
-const STATE_SYMBOL = Symbol.for('stalefish.dtp.state')
-const ID_MAP_SYMBOL = Symbol.for('stalefish.dtp.idMap')
-
-function pad2 (n) { return (n < 10 ? '0' : '') + n }
-function toYMD (d) { return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}` }
-// function toHM (d) { return `${pad2(d.getHours())}:${pad2(d.getMinutes())}` }
-function parseYMD (str) {
-  if (!str || typeof str !== 'string') return null
-  const m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str)
-  if (!m) return null
-  const y = parseInt(m[1], 10)
-  const mon = parseInt(m[2], 10) - 1
-  const day = parseInt(m[3], 10)
-  const d = new Date(y, mon, day)
-  if (d.getFullYear() !== y || d.getMonth() !== mon || d.getDate() !== day) return null
-  return d
-}
-function parseHM (str) {
-  if (!str || typeof str !== 'string') return null
-  const m = /^([0-9]{1,2}):([0-9]{2})$/.exec(str)
-  if (!m) return null
-  const h = parseInt(m[1], 10)
-  const min = parseInt(m[2], 10)
-  if (h < 0 || h > 23 || min < 0 || min > 59) return null
-  return { h, min }
-}
-function daysInMonth (y, m) { return new Date(y, m + 1, 0).getDate() }
-
-function ensureState (holdingPen, property) {
-  if (!holdingPen) return {}
-  if (!holdingPen[STATE_SYMBOL]) {
-    Object.defineProperty(holdingPen, STATE_SYMBOL, { value: {}, enumerable: false })
-  }
-  const map = holdingPen[STATE_SYMBOL]
-  if (!map[property]) {
-    map[property] = { open: false, viewMonth: null, viewYear: null, tmpDate: null, tmpHour: 0, tmpMinute: 0 }
-  }
-  return map[property]
-}
-
-function ensureId (holdingPen, property, uniqueKey) {
-  if (!holdingPen) return `sf-dtp-${property || Math.random().toString(36).slice(2)}`
-  if (!holdingPen[ID_MAP_SYMBOL]) {
-    Object.defineProperty(holdingPen, ID_MAP_SYMBOL, { value: {}, enumerable: false })
-  }
-  const map = holdingPen[ID_MAP_SYMBOL]
-  if (!map[property]) {
-    map[property] = `sf-dtp-${property}-${Math.random().toString(36).slice(2)}`
-  }
-  return `sf-dtp-${uniqueKey || map[property]}`
-}
-
-function commitValue ({ mode, holdingPen, property, onchange, valueStr }) {
-  const fauxE = { currentTarget: { validity: { valid: true }, value: valueStr } }
-  formField(holdingPen, property)(fauxE)
-  onchange && onchange(fauxE)
-}
-
-function buildTimeUI ({ state, commit, minuteStep = 1 }) {
-  const inc = (key, delta, max) => () => {
-    state[key] = (state[key] + delta + (max + 1)) % (max + 1)
-    rerender()
-  }
-  const setFromInput = (key, max) => e => {
-    const v = parseInt(e.target.value, 10)
-    if (!isNaN(v) && v >= 0 && v <= max) {
-      state[key] = v
-      rerender()
-    }
-  }
-  const stepMinute = (delta) => () => {
-    state.tmpMinute = (state.tmpMinute + delta + 60) % 60
-    rerender()
-  }
-  return html`
-    <div style="display:flex; gap: 12px; align-items: center; padding: 8px;">
-      <div style="display:flex; flex-direction:column; align-items:center;">
-        <button type="button" onclick=${inc('tmpHour', 1, 23)} aria-label="Increase hour">▲</button>
-        <input style="width:3em; text-align:center;" value=${pad2(state.tmpHour)} oninput=${setFromInput('tmpHour', 23)} />
-        <button type="button" onclick=${inc('tmpHour', -1, 23)} aria-label="Decrease hour">▼</button>
-      </div>
-      <div>:</div>
-      <div style="display:flex; flex-direction:column; align-items:center;">
-        <button type="button" onclick=${stepMinute(minuteStep)} aria-label="Increase minute">▲</button>
-        <input style="width:3em; text-align:center;" value=${pad2(state.tmpMinute)} oninput=${setFromInput('tmpMinute', 59)} />
-        <button type="button" onclick=${stepMinute(-minuteStep)} aria-label="Decrease minute">▼</button>
-      </div>
-      <button type="button" style="margin-left:auto;" onclick=${commit}>Apply</button>
-    </div>`
-}
-
-function buildCalendarUI ({ state, today, onPickDay, onPrevMonth, onNextMonth }) {
-  const y = state.viewYear
-  const m = state.viewMonth
-  const first = new Date(y, m, 1)
-  const startWeekday = first.getDay() // 0 Sun - 6 Sat
-  const dim = daysInMonth(y, m)
-  const cells = []
-  for (let i = 0; i < startWeekday; i++) cells.push(null)
-  for (let d = 1; d <= dim; d++) cells.push(d)
-  while (cells.length % 7 !== 0) cells.push(null)
-  const rows = []
-  for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7))
-  const header = html`<div style="display:flex; justify-content:space-between; align-items:center; padding: 6px 8px;">
-    <button type="button" onclick=${onPrevMonth} aria-label="Previous month">‹</button>
-    <div>${new Date(y, m, 1).toLocaleString(undefined, { month: 'long', year: 'numeric' })}</div>
-    <button type="button" onclick=${onNextMonth} aria-label="Next month">›</button>
-  </div>`
-  const weekdayRow = html`<div style="display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding: 0 8px; opacity:0.7; font-size:12px;">
-    ${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => html`<div style="text-align:center;">${d}</div>`)}
-  </div>`
-  const grid = html`<div style="display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; padding: 8px;">
-    ${rows.map(week => week.map(d => {
-      if (!d) return html`<div></div>`
-      const isToday = today.getFullYear() === y && today.getMonth() === m && today.getDate() === d
-      const isSelected = state.tmpDate && state.tmpDate.getFullYear() === y && state.tmpDate.getMonth() === m && state.tmpDate.getDate() === d
-      return html`<button type="button" onclick=${() => onPickDay(d)} style="padding:6px; ${isSelected ? 'background:#007aff; color:#fff;' : ''} ${isToday ? 'border:1px solid #007aff;' : 'border:1px solid #ddd;'}">${d}</button>`
-    }))}
-  </div>`
-  return html`<div>${header}${weekdayRow}${grid}</div>`
-}
-
-export default function dateTimePicker ({
-  wrapperStyle = null,
-  holdingPen,
-  label,
-  placeholder,
-  property,
-  required,
-  pattern,
-  permanentTopPlaceholder = true,
-  permanentTopLabel = false,
-  flatpickrConfig = {}, // ignored for compatibility
-  timeOnly = false,
-  dateTime = false, // new optional combined mode
-  disabled,
-  disableClear = false,
-  onchange,
-  oninput,
-  uniqueKey
-} = {}) {
-  // Initialize per-field state and id
-  const state = ensureState(holdingPen, property)
-  const wrapperId = ensureId(holdingPen, property, uniqueKey)
-
-  // Derive current value and seed temp state if needed
-  const currentStr = holdingPen && property ? holdingPen[property] : ''
-  const now = new Date()
-  const openMode = timeOnly ? 'time' : (dateTime ? 'datetime' : 'date')
-  if (state.viewMonth === null || state.viewYear === null) {
-    const baseDate = parseYMD(currentStr) || now
-    state.viewMonth = baseDate.getMonth()
-    state.viewYear = baseDate.getFullYear()
-  }
-  if (!state.tmpDate) {
-    state.tmpDate = parseYMD(currentStr) || new Date(now.getFullYear(), now.getMonth(), now.getDate())
-  }
-  const hm = parseHM(currentStr?.split(' ')?.[1] || (!timeOnly && !dateTime ? '' : currentStr)) || { h: now.getHours(), min: now.getMinutes() }
-  if (typeof state.tmpHour !== 'number') state.tmpHour = hm.h
-  if (typeof state.tmpMinute !== 'number') state.tmpMinute = hm.min
-
-  const icon = timeOnly ? timeIcon({ colour: '#ccc' }) : calendarIcon({ colour: '#ccc' })
-
-  const commit = () => {
-    let valueStr = ''
-    if (openMode === 'time') {
-      valueStr = `${pad2(state.tmpHour)}:${pad2(state.tmpMinute)}`
-    } else if (openMode === 'date') {
-      valueStr = toYMD(state.tmpDate)
-    } else {
-      valueStr = `${toYMD(state.tmpDate)} ${pad2(state.tmpHour)}:${pad2(state.tmpMinute)}`
+import datePicker from './datePicker.mjs'
+import timePicker from './timePicker.mjs'
+
+// Delegator component for backward compatibility.
+// New usage is to import and use datePicker or timePicker directly.
+export default function dateTimePicker (props = {}) {
+  const { timeOnly, dateTime } = props
+  if (timeOnly) {
+    // Inline controls, no popup
+    return timePicker({ ...props })
+  }
+  if (dateTime) {
+    if (typeof console !== 'undefined' && console && console.warn) {
+      console.warn('stalefish/dateTimePicker: combined dateTime mode is deprecated. Use separate datePicker and timePicker fields.')
     }
-    commitValue({ mode: openMode, holdingPen, property, onchange, valueStr })
-    state.open = false
-    rerender()
+    // Fall back to showing just the date portion to avoid breaking UIs.
+    return datePicker({ ...props })
   }
-
-  const clearValue = (e) => {
-    if (e) {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-    commitValue({ mode: openMode, holdingPen, property, onchange, valueStr: '' })
-    state.open = false
-    rerender()
-    return false
-  }
-
-  const onInputChange = (e) => {
-    change({ e, holdingPen, property, label: styles.label })
-    onchange && onchange(e)
-  }
-
-  const toggleOpen = (e) => {
-    if (disabled) return
-    e && e.stopPropagation()
-    state.open = !state.open
-    rerender()
-    if (typeof window !== 'undefined' && state.open) {
-      // Click outside to close
-      const closeOnOutside = (ev) => {
-        const wrapperEl = document.getElementById(wrapperId)
-        if (!wrapperEl) return
-        if (!wrapperEl.contains(ev.target)) {
-          state.open = false
-          rerender()
-          document.removeEventListener('mousedown', closeOnOutside, true)
-        }
-      }
-      document.addEventListener('mousedown', closeOnOutside, true)
-    }
-  }
-
-  // Compute displayed value
-  const displayValue = (() => {
-    if (!currentStr) return ''
-    return currentStr
-  })()
-
-  const calendarPart = (() => {
-    if (openMode === 'time') return html``
-    return buildCalendarUI({
-      state,
-      today: new Date(),
-      onPickDay: (d) => { state.tmpDate = new Date(state.viewYear, state.viewMonth, d); rerender() },
-      onPrevMonth: () => {
-        if (state.viewMonth === 0) { state.viewMonth = 11; state.viewYear -= 1 } else { state.viewMonth -= 1 }
-        rerender()
-      },
-      onNextMonth: () => {
-        if (state.viewMonth === 11) { state.viewMonth = 0; state.viewYear += 1 } else { state.viewMonth += 1 }
-        rerender()
-      }
-    })
-  })()
-
-  const timePart = (() => {
-    if (openMode === 'date') {
-      return html`<div style="display:flex; justify-content:flex-end; padding: 8px;"><button type="button" onclick=${commit}>Apply</button></div>`
-    }
-    return buildTimeUI({ state, commit, minuteStep: 1 })
-  })()
-
-  const popup = state.open
-    ? html`<div role="dialog" aria-modal="false" style="position:absolute; z-index: 9999; top: 55px; left: 0; background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0,0,0,.15); padding: 4px;">${calendarPart}${timePart}</div>`
-    : ''
-
-  return html`
-    <div id="${wrapperId}" class="${wrapperStyle}" style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
-      <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;" onclick=${e => e.stopPropagation()}>
-        <div class="${styles.icon}">${icon}</div>
-        ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); position: absolute; top: -36px;">${label}${required ? ' *' : ''}</span>` : ''}
-        ${!disableClear ? html`<div data-clear class="${styles.clear}" onclick=${clearValue}>clear</div>` : ''}
-        <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''}
-          onclick=${toggleOpen}
-          onfocus=${toggleOpen}
-          onchange=${onInputChange}
-          oninput=${e => { e.target.defaultValue = ''; oninput && oninput(e) }}
-          placeholder="${placeholder || ''}${required ? ' *' : ''}"
-          type="text" ${pattern ? { pattern } : ''}
-          .value=${displayValue} data-input />
-        ${popup}
-      </div>
-    </div>
-  `
+  // Default: date-only picker with popup
+  return datePicker({ ...props })
 }

package/components/timePicker.mjs

@@ -0,0 +1,198 @@
+import { html, css, formField, fieldIsTouched, rerender } from 'halfcab'
+
+const styles = css`
+  .textfield {
+    padding: 10px;
+    border: solid 5px #c9c9c9;
+    transition: border 0.3s;
+    outline: none;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 0;
+    box-shadow: none !important;
+    font-weight: normal;
+    box-sizing: border-box;
+    font-family: inherit;
+    line-height: 1.4em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    z-index: 20;
+    position: relative;
+    height: 55px;
+    background-color: #FFF;
+  }
+
+  .label {
+    transition: opacity 0.75s;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    user-select: none;
+    position: absolute;
+    top: -55px;
+    z-index: 10;
+  }
+
+  .controls {
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    display: flex;
+    gap: 6px;
+    z-index: 30;
+  }
+
+  .btn {
+    cursor: pointer;
+    background: #eee;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    padding: 6px 8px;
+    line-height: 1;
+  }
+
+  .clear {
+    cursor: pointer;
+    position: absolute;
+    color: #AAA;
+    font-size: 0.8em;
+    line-height: 0.9em;
+    font-weight: normal;
+    box-sizing: border-box;
+    right: 72px;
+    background-color: #EEE;
+    padding: 5px 10px;
+    z-index: 30;
+    border-radius: 3px;
+    top: 17px;
+  }
+`
+
+const STATE_SYMBOL = Symbol.for('stalefish.time.state')
+const ID_MAP_SYMBOL = Symbol.for('stalefish.time.idMap')
+
+function pad2 (n) { return (n < 10 ? '0' : '') + n }
+function parseHM (str) {
+  if (!str || typeof str !== 'string') return null
+  const m = /^([0-9]{1,2}):([0-9]{2})$/.exec(str)
+  if (!m) return null
+  const h = parseInt(m[1], 10)
+  const min = parseInt(m[2], 10)
+  if (h < 0 || h > 23 || min < 0 || min > 59) return null
+  return { h, min }
+}
+
+function ensureState (holdingPen, property) {
+  if (!holdingPen) return {}
+  if (!holdingPen[STATE_SYMBOL]) {
+    Object.defineProperty(holdingPen, STATE_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[STATE_SYMBOL]
+  if (!map[property]) {
+    map[property] = { tmpHour: 0, tmpMinute: 0 }
+  }
+  return map[property]
+}
+
+function ensureId (holdingPen, property, uniqueKey) {
+  if (!holdingPen) return `sf-time-${property || Math.random().toString(36).slice(2)}`
+  if (!holdingPen[ID_MAP_SYMBOL]) {
+    Object.defineProperty(holdingPen, ID_MAP_SYMBOL, { value: {}, enumerable: false })
+  }
+  const map = holdingPen[ID_MAP_SYMBOL]
+  if (!map[property]) {
+    map[property] = `sf-time-${property}-${Math.random().toString(36).slice(2)}`
+  }
+  return `sf-time-${uniqueKey || map[property]}`
+}
+
+function commitValue ({ holdingPen, property, onchange, valueStr }) {
+  const fauxE = { currentTarget: { validity: { valid: true }, value: valueStr } }
+  formField(holdingPen, property)(fauxE)
+  onchange && onchange(fauxE)
+}
+
+export default function timePicker ({
+  wrapperStyle = null,
+  holdingPen,
+  label,
+  placeholder,
+  property,
+  required,
+  pattern,
+  disabled,
+  disableClear = false,
+  minuteStep = 15,
+  onchange,
+  oninput,
+  uniqueKey
+} = {}) {
+  const wrapperId = ensureId(holdingPen, property, uniqueKey)
+  const state = ensureState(holdingPen, property)
+
+  const currentStr = holdingPen && property ? holdingPen[property] : ''
+  const now = new Date()
+  const hm = parseHM(currentStr) || { h: now.getHours(), min: Math.floor(now.getMinutes() / minuteStep) * minuteStep }
+  if (typeof state.tmpHour !== 'number') state.tmpHour = hm.h
+  if (typeof state.tmpMinute !== 'number') state.tmpMinute = hm.min
+
+  const stepMinute = (delta) => () => {
+    state.tmpMinute = (state.tmpMinute + delta + 60) % 60
+    const valueStr = `${pad2(state.tmpHour)}:${pad2(state.tmpMinute)}`
+    commitValue({ holdingPen, property, onchange, valueStr })
+    rerender()
+  }
+
+  const stepHour = (delta) => () => {
+    state.tmpHour = (state.tmpHour + delta + 24) % 24
+    const valueStr = `${pad2(state.tmpHour)}:${pad2(state.tmpMinute)}`
+    commitValue({ holdingPen, property, onchange, valueStr })
+    rerender()
+  }
+
+  const onTypedChange = (e) => {
+    // Allow free typing of HH:mm
+    const v = (e?.target?.value || '').trim()
+    const parsed = parseHM(v)
+    if (parsed) {
+      state.tmpHour = parsed.h
+      state.tmpMinute = parsed.min
+      commitValue({ holdingPen, property, onchange, valueStr: `${pad2(parsed.h)}:${pad2(parsed.min)}` })
+      rerender()
+    } else {
+      // Still forward input for external listeners if needed
+      oninput && oninput(e)
+    }
+  }
+
+  const clearValue = (e) => {
+    if (e) { e.stopPropagation(); e.preventDefault() }
+    commitValue({ holdingPen, property, onchange, valueStr: '' })
+    rerender()
+    return false
+  }
+
+  const displayValue = holdingPen && property ? (holdingPen[property] || '') : ''
+
+  return html`
+    <div id="${wrapperId}" class="${wrapperStyle}" style="min-height: 55px; display: inline-block; width: calc(100% - 10px); margin: 40px 5px 5px 5px;">
+      <div style="display: inline-block; width: 100%; text-align: left; position: relative; padding: 0;">
+        ${label ? html`<span class="${styles.label}" style="opacity: ${(holdingPen && (holdingPen[property] === 0 || holdingPen[property])) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); position: absolute; top: -36px;">${label}${required ? ' *' : ''}</span>` : ''}
+        ${!disableClear ? html`<div data-clear class="${styles.clear}" onclick=${clearValue}>clear</div>` : ''}
+        <input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''}
+          onchange=${onTypedChange}
+          oninput=${onTypedChange}
+          placeholder="${(placeholder || 'Time') + (required ? ' *' : '')}"
+          type="text" ${pattern ? { pattern } : ''}
+          .value=${displayValue} data-input />
+
+        <div class="${styles.controls}">
+          <button type="button" class="${styles.btn}" onclick=${stepHour(1)} aria-label="Increase hour">+1h</button>
+          <button type="button" class="${styles.btn}" onclick=${stepHour(-1)} aria-label="Decrease hour">-1h</button>
+          <button type="button" class="${styles.btn}" onclick=${stepMinute(minuteStep)} aria-label="Increase minutes">+${minuteStep}m</button>
+          <button type="button" class="${styles.btn}" onclick=${stepMinute(-minuteStep)} aria-label="Decrease minutes">-${minuteStep}m</button>
+        </div>
+      </div>
+    </div>
+  `
+}

package/index.mjs

@@ -12,6 +12,8 @@ import toolbar from './components/toolbar.mjs'
 import fab from './components/fab.mjs'
 import table from './components/table.mjs'
 import dateTimePicker from './components/dateTimePicker.mjs'
+import datePicker from './components/datePicker.mjs'
+import timePicker from './components/timePicker.mjs'
 import moreVertical from './components/icons/moreVertical.mjs'
 import close from './components/icons/close.mjs'
 import up from './components/icons/up.mjs'
@@ -39,6 +41,8 @@ export {
   fab,
   table,
   dateTimePicker,
+  datePicker,
+  timePicker,
   calendarIcon,
   timeIcon,
   solidDown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.0.10",
+  "version": "8.0.11",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",