@rip-lang/ui 0.3.19 → 0.3.21

package/checkbox-group.rip

@@ -0,0 +1,65 @@
+# CheckboxGroup — accessible headless checkbox group
+#
+# Multiple options can be checked independently. Wraps individual checkboxes
+# with group semantics. Value is an array of checked option values.
+# Ships zero CSS.
+#
+# Usage:
+#   CheckboxGroup value <=> selectedToppings
+#     div $value: "cheese", "Cheese"
+#     div $value: "bacon", "Bacon"
+#     div $value: "lettuce", "Lettuce"
+
+export CheckboxGroup = component
+  @value := []
+  @disabled := false
+  @orientation := 'vertical'
+  @label := ''
+
+  _options ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _isChecked: (val) ->
+    Array.isArray(@value) and val in @value
+
+  _toggle: (val) ->
+    return if @disabled
+    arr = if Array.isArray(@value) then [...@value] else []
+    if val in arr
+      arr = arr.filter (v) -> v isnt val
+    else
+      arr.push val
+    @value = arr
+    @emit 'change', @value
+
+  onKeydown: (e) ->
+    boxes = @_root?.querySelectorAll('[role="checkbox"]')
+    return unless boxes?.length
+    focused = Array.from(boxes).indexOf(document.activeElement)
+    return if focused < 0
+    len = boxes.length
+    switch e.key
+      when 'ArrowDown', 'ArrowRight'
+        e.preventDefault()
+        boxes[(focused + 1) %% len]?.focus()
+      when 'ArrowUp', 'ArrowLeft'
+        e.preventDefault()
+        boxes[(focused - 1) %% len]?.focus()
+
+  render
+    div ref: "_root", role: "group", aria-label: @label or undefined, aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for opt, idx in _options
+        button role: "checkbox", tabindex: (if idx is 0 then "0" else "-1")
+          aria-checked: !!@_isChecked(opt.dataset.value)
+          $checked: @_isChecked(opt.dataset.value)?!
+          $disabled: @disabled?!
+          $value: opt.dataset.value
+          @click: (=> @_toggle(opt.dataset.value))
+          = opt.textContent

package/checkbox.rip

@@ -0,0 +1,33 @@
+# Checkbox — accessible headless checkbox/switch widget
+#
+# Toggles on click, Enter, or Space. Supports indeterminate state.
+# Exposes $checked, $indeterminate, $disabled. Ships zero CSS.
+# Set @switch to true for switch semantics (role="switch").
+#
+# Usage:
+#   Checkbox checked <=> isActive, @change: handleChange
+#     span "Enable notifications"
+#
+#   Checkbox checked <=> isDark, switch: true
+#     span "Dark mode"
+
+export Checkbox = component
+  @checked := false
+  @disabled := false
+  @indeterminate := false
+  @switch := false
+
+  onClick: ->
+    return if @disabled
+    @indeterminate = false
+    @checked = not @checked
+    @emit 'change', @checked
+
+  render
+    button role: @switch ? 'switch' : 'checkbox'
+      aria-checked: @indeterminate ? 'mixed' : !!@checked
+      aria-disabled: @disabled?!
+      $checked: @checked?!
+      $indeterminate: @indeterminate?!
+      $disabled: @disabled?!
+      slot

package/collapsible.rip

@@ -0,0 +1,50 @@
+# Collapsible — accessible headless expand/collapse section
+#
+# Single open/close section. Simpler than Accordion (no item IDs,
+# no single/multiple mode). Exposes content dimensions as CSS
+# custom properties for animated expand/collapse. Ships zero CSS.
+#
+# Usage:
+#   Collapsible open <=> isOpen
+#     button $trigger: true, "Show details"
+#     div $content: true
+#       p "Hidden content here"
+
+export Collapsible = component
+  @open := false
+  @disabled := false
+
+  _ready := false
+
+  mounted: ->
+    _ready = true
+    trigger = @_root?.querySelector('[data-trigger]')
+    return unless trigger
+    trigger.addEventListener 'click', => @toggle() unless @disabled
+    trigger.addEventListener 'keydown', (e) =>
+      if e.key in ['Enter', ' '] and not @disabled
+        e.preventDefault()
+        @toggle()
+
+  toggle: ->
+    @open = not @open
+    @emit 'change', @open
+
+  ~>
+    return unless _ready
+    trigger = @_root?.querySelector('[data-trigger]')
+    content = @_root?.querySelector('[data-content]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', !!@open
+      trigger.setAttribute 'aria-disabled', true if @disabled
+      trigger.tabIndex = if @disabled then -1 else 0
+    if content
+      content.hidden = not @open
+      if @open
+        rect = content.getBoundingClientRect()
+        content.style.setProperty '--collapsible-height', "#{rect.height}px"
+        content.style.setProperty '--collapsible-width', "#{rect.width}px"
+
+  render
+    div ref: "_root", $open: @open?!, $disabled: @disabled?!
+      slot

package/combobox.rip

@@ -0,0 +1,155 @@
+# Combobox — accessible headless combobox (input + filterable listbox)
+#
+# Keyboard: ArrowDown/Up to navigate, Enter to select, Escape to close,
+#           typing filters the list via the @filter callback.
+#
+# Exposes $open on the wrapper, $highlighted on options.
+# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
+#
+# Usage:
+#   Combobox query <=> searchText, items: fruits, @select: handleSelect, @filter: filterFn
+
+export Combobox = component
+  @query := ''
+  @items := []
+  @placeholder := 'Search...'
+  @disabled := false
+  @autoHighlight := true
+
+  open := false
+  highlightedIndex := -1
+  _listId =! "cb-#{Math.random().toString(36).slice(2, 8)}"
+
+  getItems: ->
+    return [] unless @_list
+    Array.from(@_list.querySelectorAll('[role="option"]'))
+
+  _scrollToItem: ->
+    @getItems()[highlightedIndex]?.scrollIntoView({ block: 'nearest' })
+
+  clear: ->
+    @query = ''
+    highlightedIndex = -1
+    @emit 'filter', ''
+
+  onInput: (e) ->
+    @query = e.target.value
+    open = true
+    highlightedIndex = if @autoHighlight and @items.length > 0 then 0 else -1
+    @emit 'filter', @query
+
+  onFocusin: -> @openMenu()
+
+  onFocusout: (e) ->
+    unless @_content?.contains(e.relatedTarget)
+      @close()
+
+  openMenu: ->
+    open = true
+    highlightedIndex = -1
+    setTimeout => @_position(), 0
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+
+  _position: ->
+    return unless @_input and @_list
+    tr = @_input.getBoundingClientRect()
+    @_list.style.left = "#{tr.left}px"
+    @_list.style.top = "#{tr.bottom + 2}px"
+    @_list.style.minWidth = "#{tr.width}px"
+    fl = @_list.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_list.style.top = "#{tr.top - fl.height - 2}px"
+
+  isDisabled: (item) -> item?.hasAttribute?('data-disabled')
+
+  selectIndex: (idx) ->
+    item = @getItems()[idx]
+    return unless item
+    return if @isDisabled(item)
+    val = item.dataset.value ?? item.textContent.trim()
+    @query = val
+    @emit 'select', val
+    @close()
+    @_input?.blur()
+
+  _nextEnabled: (from, dir) ->
+    opts = @getItems()
+    len = opts.length
+    i = from
+    loop len
+      i = (i + dir) %% len
+      return i unless @isDisabled(opts[i])
+    from
+
+  _onKeydown: (e) ->
+    len = @getItems().length
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        @openMenu() unless open
+        highlightedIndex = @_nextEnabled(highlightedIndex, 1)
+        @_scrollToItem()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = @_nextEnabled(highlightedIndex, -1)
+        @_scrollToItem()
+      when 'Enter'
+        e.preventDefault()
+        if highlightedIndex >= 0
+          @selectIndex(highlightedIndex)
+        else if len is 1
+          @selectIndex(0)
+      when 'Escape'
+        e.preventDefault()
+        if open then @close() else @query = ''
+      when 'Tab'
+        @close()
+
+  ~>
+    if open
+      onDown = (e) =>
+        root = @_content
+        unless root?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . ref: "_content", $open: open?!
+
+      # Text input
+      . style: "position:relative;display:inline-flex;align-items:center"
+        input ref: "_input", role: "combobox"
+          type: "text"
+          autocomplete: "off"
+          aria-expanded: !!open
+          aria-haspopup: "listbox"
+          aria-autocomplete: "list"
+          aria-controls: if open then _listId else undefined
+          aria-activedescendant: if highlightedIndex >= 0 then "#{_listId}-#{highlightedIndex}" else undefined
+          $disabled: @disabled?!
+          disabled: @disabled
+          placeholder: @placeholder
+          value: @query
+          @keydown: @_onKeydown
+        if @query
+          button aria-label: "Clear", $clear: true, @click: @clear
+            "✕"
+
+      # Listbox — conditionally rendered (like Select)
+      if open and @items.length > 0
+        div ref: "_list", id: _listId, role: "listbox", $open: true
+          style: "position:fixed"
+          for item, idx in @items
+            div role: "option", tabindex: "-1", id: "#{_listId}-#{idx}"
+              $value: item
+              $highlighted: (idx is highlightedIndex)?!
+              @click: (=> @selectIndex(idx))
+              @mouseenter: (=> highlightedIndex = idx)
+              "#{item}"
+      if open and @items.length is 0 and @query
+        div role: "status", aria-live: "polite", $empty: true
+          "No results"

package/context-menu.rip

@@ -0,0 +1,105 @@
+# ContextMenu — accessible headless right-click menu
+#
+# Opens on contextmenu event (right-click) over the trigger area.
+# Keyboard navigation matches Menu. Ships zero CSS.
+#
+# Usage:
+#   ContextMenu @select: handleAction
+#     div $trigger: true
+#       p "Right-click this area"
+#     div $item: "cut", "Cut"
+#     div $item: "copy", "Copy"
+#     div $item: "paste", "Paste"
+
+export ContextMenu = component
+  @disabled := false
+
+  open := false
+  highlightedIndex := -1
+  posX := 0
+  posY := 0
+
+  _menuItems ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-item]') or [])
+
+  _triggerEl ~=
+    return null unless @_slot
+    @_slot.querySelector('[data-trigger]')
+
+  _onContextMenu: (e) ->
+    return if @disabled
+    e.preventDefault()
+    posX = e.clientX
+    posY = e.clientY
+    open = true
+    highlightedIndex = 0
+    requestAnimationFrame =>
+      @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+
+  close: ->
+    open = false
+    highlightedIndex = -1
+
+  selectIndex: (idx) ->
+    item = _menuItems[idx]
+    return unless item
+    return if item.dataset.disabled?
+    @emit 'select', item.dataset.item
+    @close()
+
+  _onKeydown: (e) ->
+    len = _menuItems.length
+    return unless len
+    switch e.key
+      when 'ArrowDown'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex + 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'ArrowUp'
+        e.preventDefault()
+        highlightedIndex = (highlightedIndex - 1) %% len
+        @_list?.querySelectorAll('[role="menuitem"]')[highlightedIndex]?.focus()
+      when 'Home'
+        e.preventDefault()
+        highlightedIndex = 0
+        @_list?.querySelectorAll('[role="menuitem"]')[0]?.focus()
+      when 'End'
+        e.preventDefault()
+        highlightedIndex = len - 1
+        @_list?.querySelectorAll('[role="menuitem"]')[len - 1]?.focus()
+      when 'Enter', ' '
+        e.preventDefault()
+        @selectIndex(highlightedIndex)
+      when 'Escape', 'Tab'
+        e.preventDefault() if e.key is 'Escape'
+        @close()
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_list?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . @contextmenu: @_onContextMenu
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      if _triggerEl
+        . innerHTML: _triggerEl.innerHTML
+
+      if open
+        div ref: "_list", role: "menu", $open: true, @keydown: @_onKeydown
+          style: "position:fixed;left:#{posX}px;top:#{posY}px;z-index:50"
+          for item, idx in _menuItems
+            div role: "menuitem", tabindex: "-1"
+              $highlighted: (idx is highlightedIndex)?!
+              $disabled: item.dataset.disabled?!
+              $value: item.dataset.item
+              @click: (=> @selectIndex(idx))
+              @mouseenter: (=> highlightedIndex = idx)
+              = item.textContent

package/date-picker.rip

@@ -0,0 +1,214 @@
+# DatePicker — accessible headless date picker with calendar
+#
+# A popover calendar for selecting a single date or a date range.
+# Set @range to true for range selection (value becomes [from, to]).
+# Keyboard: Arrow keys navigate days, Enter selects, Escape closes.
+# Ships zero CSS — style entirely via attribute selectors in your stylesheet.
+#
+# Usage:
+#   DatePicker value <=> selectedDate, placeholder: "Pick a date"
+#   DatePicker value <=> dateRange, range: true
+
+dpFmt = (d) ->
+  return '' unless d
+  m = String(d.getMonth() + 1).padStart(2, '0')
+  day = String(d.getDate()).padStart(2, '0')
+  "#{m}/#{day}/#{d.getFullYear()}"
+
+dpParse = (str) ->
+  return null unless str?.length is 10
+  parts = str.split('/')
+  return null unless parts.length is 3
+  [m, d, y] = parts.map Number
+  return null if isNaN(m) or isNaN(d) or isNaN(y)
+  dt = new Date(y, m - 1, d)
+  return null if dt.getMonth() isnt m - 1
+  dt
+
+dpSameDay = (a, b) ->
+  return false unless a and b
+  a.getFullYear() is b.getFullYear() and a.getMonth() is b.getMonth() and a.getDate() is b.getDate()
+
+dpInRange = (day, from, to) ->
+  return false unless day and from and to
+  t = day.getTime()
+  lo = Math.min(from.getTime(), to.getTime())
+  hi = Math.max(from.getTime(), to.getTime())
+  t >= lo and t <= hi
+
+export DatePicker = component
+  @value := null
+  @placeholder := 'mm/dd/yyyy'
+  @disabled := false
+  @range := false
+  @firstDayOfWeek := 0
+
+  open := false
+  viewMonth := new Date()
+  _rangeStart := null
+  _hoveredDay := null
+  _inputText := ''
+  _id =! "dp-#{Math.random().toString(36).slice(2, 8)}"
+
+  _dayNames =! ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+
+  _daysInView ~=
+    yr = viewMonth.getFullYear()
+    mo = viewMonth.getMonth()
+    firstOfMonth = new Date(yr, mo, 1)
+    startDay = firstOfMonth.getDay()
+    offset = (startDay - @firstDayOfWeek + 7) %% 7
+    daysInMonth = new Date(yr, mo + 1, 0).getDate()
+    prevMonthDays = new Date(yr, mo, 0).getDate()
+    dayList = []
+    for n in [0...offset]
+      dayList.push { date: new Date(yr, mo - 1, prevMonthDays - offset + n + 1), outside: true }
+    for n in [1..daysInMonth]
+      dayList.push { date: new Date(yr, mo, n), outside: false }
+    trailing = (7 - dayList.length %% 7) %% 7
+    for n in [1..trailing]
+      dayList.push { date: new Date(yr, mo + 1, n), outside: true }
+    dayList
+
+  _displayText ~=
+    if @range
+      if Array.isArray(@value) and @value[0]
+        from = dpFmt(@value[0])
+        to = if @value[1] then dpFmt(@value[1]) else '...'
+        "#{from} – #{to}"
+      else
+        @placeholder
+    else
+      if @value then dpFmt(@value) else @placeholder
+
+  _monthLabel ~=
+    viewMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+
+  _today =! new Date()
+
+  _prevMonth: ->
+    viewMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1)
+
+  _nextMonth: ->
+    viewMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1)
+
+  _selectDay: (day) ->
+    return if @disabled
+    if @range
+      if _rangeStart and not dpSameDay(_rangeStart, day)
+        from = if _rangeStart < day then _rangeStart else day
+        to = if _rangeStart < day then day else _rangeStart
+        @value = [from, to]
+        _rangeStart = null
+        @emit 'change', @value
+        open = false
+      else
+        _rangeStart = day
+        @value = [day, null]
+    else
+      @value = day
+      @emit 'change', @value
+      open = false
+    _inputText = _displayText
+
+  _onInputChange: (e) ->
+    raw = e.target.value.replace(/[^\d\/]/g, '')
+    if raw.length <= 10
+      _inputText = raw
+    if raw.length is 10
+      dt = dpParse(raw)
+      if dt
+        @value = dt
+        viewMonth = new Date(dt.getFullYear(), dt.getMonth(), 1)
+        @emit 'change', @value
+
+  toggle: ->
+    return if @disabled
+    if open then @close() else @openPicker()
+
+  openPicker: ->
+    open = true
+    if @value and not @range
+      viewMonth = new Date(@value.getFullYear(), @value.getMonth(), 1)
+    else if @range and Array.isArray(@value) and @value[0]
+      viewMonth = new Date(@value[0].getFullYear(), @value[0].getMonth(), 1)
+    _inputText = _displayText
+    setTimeout => @_position(), 0
+
+  close: ->
+    open = false
+    _rangeStart = null
+    _hoveredDay = null
+
+  _position: ->
+    return unless @_trigger and @_cal
+    tr = @_trigger.getBoundingClientRect()
+    @_cal.style.position = 'fixed'
+    @_cal.style.left = "#{tr.left}px"
+    @_cal.style.top = "#{tr.bottom + 4}px"
+    fl = @_cal.getBoundingClientRect()
+    if fl.bottom > window.innerHeight
+      @_cal.style.top = "#{tr.top - fl.height - 4}px"
+
+  _onKeydown: (e) ->
+    switch e.key
+      when 'Escape'
+        e.preventDefault()
+        @close()
+        @_trigger?.focus()
+      when 'Enter', ' '
+        e.preventDefault()
+        @toggle() unless open
+
+  ~>
+    if open
+      onDown = (e) =>
+        unless @_trigger?.contains(e.target) or @_cal?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  render
+    . $open: open?!, $disabled: @disabled?!, $range: @range?!
+
+      # Trigger
+      button ref: "_trigger", $trigger: true
+        aria-haspopup: "dialog"
+        aria-expanded: !!open
+        disabled: @disabled
+        @click: @toggle
+        @keydown: @_onKeydown
+        _displayText
+
+      # Calendar dropdown
+      if open
+        div ref: "_cal", role: "dialog", aria-label: "Date picker", $calendar: true
+          style: "position:fixed;z-index:50"
+
+          # Month navigation
+          . $header: true
+            button $prev: true, aria-label: "Previous month", @click: @_prevMonth
+              "‹"
+            span $month-label: true
+              _monthLabel
+            button $next: true, aria-label: "Next month", @click: @_nextMonth
+              "›"
+
+          # Day-of-week headers
+          . $weekdays: true
+            for dayName in _dayNames
+              span $weekday: true
+                dayName
+
+          # Day grid
+          . $days: true, role: "grid"
+            for entry, dIdx in _daysInView
+              button role: "gridcell", tabindex: "-1"
+                $outside: entry.outside?!
+                $today: dpSameDay(entry.date, _today)?!
+                $selected: (if @range then (Array.isArray(@value) and (dpSameDay(entry.date, @value[0]) or dpSameDay(entry.date, @value[1]))) else dpSameDay(entry.date, @value))?!
+                $in-range: (if @range then (if _rangeStart then dpInRange(entry.date, _rangeStart, _hoveredDay or _rangeStart) else if Array.isArray(@value) and @value[0] and @value[1] then dpInRange(entry.date, @value[0], @value[1]) else false) else false)?!
+                $range-start: (if @range and _rangeStart then dpSameDay(entry.date, _rangeStart) else false)?!
+                @click: (=> @_selectDay(entry.date))
+                @mouseenter: (=> _hoveredDay = entry.date)
+                entry.date.getDate()