rip-lang 3.13.65 → 3.13.67

package/docs/ui/number-field.rip

@@ -0,0 +1,162 @@
+# NumberField — accessible headless number input with stepper buttons
+#
+# Increment/decrement with click, hold-to-repeat, and keyboard.
+# Supports min/max/step clamping and Shift/Alt step modifiers.
+# Ships zero CSS.
+#
+# Usage:
+#   NumberField value <=> quantity
+#   NumberField value <=> price, min: 0, max: 1000, step: 0.01
+
+START_DELAY = 400
+TICK_DELAY  = 60
+
+export NumberField = component
+  @value := 0
+  @min := null
+  @max := null
+  @step := 1
+  @smallStep := 0.1
+  @largeStep := 10
+  @disabled := false
+  @readOnly := false
+  @name := null
+
+  _timer = null
+  _interval = null
+  _id =! "nf-#{Math.random().toString(36).slice(2, 8)}"
+
+  _clamp: (v) ->
+    v = Math.max(@min, v) if @min?
+    v = Math.min(@max, v) if @max?
+    v
+
+  _roundToStep: (v) ->
+    base = @min ?? 0
+    rounded = Math.round((v - base) / @step) * @step + base
+    precision = String(@step).split('.')[1]?.length or 0
+    parseFloat rounded.toFixed(precision)
+
+  _stepAmount: (e) ->
+    if e?.altKey then @smallStep
+    else if e?.shiftKey then @largeStep
+    else @step
+
+  increment: (amount) ->
+    return if @disabled or @readOnly
+    @value = @_clamp(@_roundToStep(+@value + amount))
+    @emit 'input', @value
+
+  decrement: (amount) ->
+    return if @disabled or @readOnly
+    @value = @_clamp(@_roundToStep(+@value - amount))
+    @emit 'input', @value
+
+  _startRepeat: (dir, e) ->
+    amount = @_stepAmount(e)
+    tick = => if dir > 0 then @increment(amount) else @decrement(amount)
+    tick()
+    _timer = setTimeout =>
+      _interval = setInterval tick, TICK_DELAY
+    , START_DELAY
+
+  _stopRepeat: ->
+    clearTimeout _timer if _timer
+    clearInterval _interval if _interval
+    _timer = null
+    _interval = null
+    @emit 'change', @value
+
+  _onIncDown: (e) ->
+    return if @disabled or @readOnly or e.button isnt 0
+    e.preventDefault()
+    @_input?.focus()
+    @_startRepeat 1, e
+    onUp = =>
+      @_stopRepeat()
+      document.removeEventListener 'pointerup', onUp
+    document.addEventListener 'pointerup', onUp
+
+  _onDecDown: (e) ->
+    return if @disabled or @readOnly or e.button isnt 0
+    e.preventDefault()
+    @_input?.focus()
+    @_startRepeat -1, e
+    onUp = =>
+      @_stopRepeat()
+      document.removeEventListener 'pointerup', onUp
+    document.addEventListener 'pointerup', onUp
+
+  onKeydown: (e) ->
+    return if @disabled or @readOnly
+    amount = @_stepAmount(e)
+    switch e.key
+      when 'ArrowUp'
+        e.preventDefault()
+        @increment(amount)
+        @emit 'change', @value
+      when 'ArrowDown'
+        e.preventDefault()
+        @decrement(amount)
+        @emit 'change', @value
+      when 'PageUp'
+        e.preventDefault()
+        @increment(@largeStep)
+        @emit 'change', @value
+      when 'PageDown'
+        e.preventDefault()
+        @decrement(@largeStep)
+        @emit 'change', @value
+      when 'Home'
+        if @min?
+          e.preventDefault()
+          @value = @min
+          @emit 'change', @value
+      when 'End'
+        if @max?
+          e.preventDefault()
+          @value = @max
+          @emit 'change', @value
+
+  _onBlur: ->
+    val = parseFloat @_input?.value
+    unless isNaN(val)
+      @value = @_clamp(@_roundToStep(val))
+    @emit 'change', @value
+
+  _ready := false
+
+  mounted: -> _ready = true
+
+  ~>
+    return unless _ready
+    @_input?.value = String(@value)
+
+  beforeUnmount: -> @_stopRepeat()
+
+  render
+    div role: "group", $disabled: @disabled?!, $readonly: @readOnly?!
+      button aria-label: "Decrease", tabindex: "-1"
+        $decrement: true
+        aria-controls: _id
+        disabled: @disabled or (@min? and @value <= @min)
+        @pointerdown: @_onDecDown
+
+      input ref: "_input", id: _id, type: "text", inputmode: "numeric"
+        name: @name?!
+        aria-roledescription: "Number field"
+        aria-valuenow: @value
+        aria-valuemin: @min?!
+        aria-valuemax: @max?!
+        aria-disabled: @disabled?!
+        aria-readonly: @readOnly?!
+        disabled: @disabled
+        readonly: @readOnly
+        @keydown: @onKeydown
+        @blur: @_onBlur
+
+      button aria-label: "Increase", tabindex: "-1"
+        $increment: true
+        aria-controls: _id
+        disabled: @disabled or (@max? and @value >= @max)
+        @pointerdown: @_onIncDown

package/docs/ui/otp-field.rip

@@ -0,0 +1,89 @@
+# OTPField — accessible headless one-time password input
+#
+# Multi-digit code input with auto-advance, backspace navigation, and
+# paste support. Each digit gets its own input box. Ships zero CSS.
+#
+# Usage:
+#   OTPField length: 6, value <=> code, @complete: handleVerify
+
+export OTPField = component
+  @length := 6
+  @value := ''
+  @disabled := false
+  @mask := false
+
+  _id =! "otp-#{Math.random().toString(36).slice(2, 8)}"
+
+  _getInputs: ->
+    return [] unless @_root
+    Array.from(@_root.querySelectorAll('input'))
+
+  _focusAt: (idx) ->
+    inputs = @_getInputs()
+    inputs[idx]?.focus()
+    inputs[idx]?.select()
+
+  _updateValue: ->
+    inputs = @_getInputs()
+    digits = inputs.map (el) -> el.value
+    @value = digits.join('')
+    @emit 'input', @value
+    if @value.length is @length and digits.every (d) -> d.length is 1
+      @emit 'complete', @value
+
+  _onInput: (e, idx) ->
+    ch = e.target.value.slice(-1)
+    e.target.value = ch
+    @_updateValue()
+    @_focusAt(idx + 1) if ch and idx < @length - 1
+
+  _onKeydown: (e, idx) ->
+    switch e.key
+      when 'Backspace'
+        if not e.target.value and idx > 0
+          @_focusAt(idx - 1)
+          inputs = @_getInputs()
+          inputs[idx - 1]?.value = ''
+          @_updateValue()
+      when 'ArrowLeft'
+        e.preventDefault()
+        @_focusAt(idx - 1) if idx > 0
+      when 'ArrowRight'
+        e.preventDefault()
+        @_focusAt(idx + 1) if idx < @length - 1
+      when 'Home'
+        e.preventDefault()
+        @_focusAt(0)
+      when 'End'
+        e.preventDefault()
+        @_focusAt(@length - 1)
+
+  _onPaste: (e) ->
+    e.preventDefault()
+    text = (e.clipboardData?.getData('text') or '').replace(/\D/g, '').slice(0, @length)
+    return unless text
+    inputs = @_getInputs()
+    for ch, idx in text.split('')
+      inputs[idx]?.value = ch
+    @_updateValue()
+    @_focusAt(Math.min(text.length, @length - 1))
+
+  _onFocus: (e) -> e.target.select()
+
+  render
+    div ref: "_root", role: "group", aria-label: "One-time password"
+      $disabled: @disabled?!
+      $complete: (@value.length is @length)?!
+      for idx in [0...@length]
+        input id: "#{_id}-#{idx}"
+          type: if @mask then "password" else "text"
+          inputmode: "numeric"
+          autocomplete: "one-time-code"
+          maxlength: "1"
+          aria-label: "Digit #{idx + 1} of #{@length}"
+          disabled: @disabled
+          $filled: (@value[idx])?!
+          @input: (e) => @_onInput(e, idx)
+          @keydown: (e) => @_onKeydown(e, idx)
+          @paste: @_onPaste
+          @focus: @_onFocus

package/docs/ui/popover.rip

@@ -0,0 +1,143 @@
+# Popover — accessible headless popover with anchor positioning
+#
+# Positions itself relative to the trigger. Dismisses on Escape or click outside.
+# Exposes $open, $placement on content. Ships zero CSS.
+#
+# Usage:
+#   Popover placement: "bottom-start"
+#     button $trigger: true, "Click me"
+#     div $content: true
+#       p "Popover content"
+
+export Popover = component
+  @placement := 'bottom-start'
+  @offset := 4
+  @disabled := false
+  @openOnHover := false
+  @hoverDelay := 300
+  @hoverCloseDelay := 200
+
+  open := false
+  _ready := false
+  _hoverTimer := null
+  _hoverCloseTimer := null
+  _id =! "pop-#{Math.random().toString(36).slice(2, 8)}"
+
+  mounted: ->
+    _ready = true
+    trigger = @_content?.querySelector('[data-trigger]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', false
+      trigger.setAttribute 'aria-haspopup', 'dialog'
+      trigger.addEventListener 'click', => @toggle()
+      trigger.addEventListener 'keydown', (e) =>
+        if e.key in ['Enter', ' ', 'ArrowDown']
+          e.preventDefault()
+          @toggle()
+      if @openOnHover
+        trigger.addEventListener 'mouseenter', =>
+          clearTimeout _hoverCloseTimer if _hoverCloseTimer
+          _hoverTimer = setTimeout (=> @openPopover()), @hoverDelay
+        trigger.addEventListener 'mouseleave', =>
+          clearTimeout _hoverTimer if _hoverTimer
+          _hoverCloseTimer = setTimeout (=> @close()), @hoverCloseDelay
+
+  toggle: ->
+    return if @disabled
+    if open then @close() else @openPopover()
+
+  openPopover: ->
+    open = true
+    setTimeout => @_position(), 0
+
+  close: ->
+    open = false
+    @_content?.querySelector('[data-trigger]')?.focus()
+
+  _position: ->
+    trigger = @_content?.querySelector('[data-trigger]')
+    floating = @_content?.querySelector('[data-content]')
+    return unless trigger and floating
+    @_content.style.position = 'relative'
+    tr = trigger.getBoundingClientRect()
+    cr = @_content.getBoundingClientRect()
+    fl = floating.getBoundingClientRect()
+    [side, align] = @placement.split('-')
+    align ?= 'center'
+    gap = @offset
+
+    x = switch side
+      when 'bottom', 'top'
+        switch align
+          when 'start' then tr.left - cr.left
+          when 'end' then tr.right - cr.left - fl.width
+          else tr.left - cr.left + (tr.width - fl.width) / 2
+      when 'right' then tr.right - cr.left + gap
+      when 'left' then tr.left - cr.left - fl.width - gap
+
+    y = switch side
+      when 'bottom' then tr.bottom - cr.top + gap
+      when 'top' then tr.top - cr.top - fl.height - gap
+      when 'left', 'right'
+        switch align
+          when 'start' then tr.top - cr.top
+          when 'end' then tr.bottom - cr.top - fl.height
+          else tr.top - cr.top + (tr.height - fl.height) / 2
+
+    if side is 'bottom' and tr.bottom + gap + fl.height > window.innerHeight
+      y = tr.top - cr.top - fl.height - gap
+    if side is 'top' and tr.top - fl.height - gap < 0
+      y = tr.bottom - cr.top + gap
+    if side is 'right' and tr.right + gap + fl.width > window.innerWidth
+      x = tr.left - cr.left - fl.width - gap
+    if side is 'left' and tr.left - fl.width - gap < 0
+      x = tr.right - cr.left + gap
+
+    x = Math.max(4 - cr.left, Math.min(x, window.innerWidth - cr.left - fl.width - 4))
+
+    floating.style.position = 'absolute'
+    floating.style.left = "#{x}px"
+    floating.style.top = "#{y}px"
+    floating.style.zIndex = '50'
+
+  ~>
+    return unless _ready
+    trigger = @_content?.querySelector('[data-trigger]')
+    floating = @_content?.querySelector('[data-content]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', !!open
+    if floating
+      floating.hidden = not open
+      if open
+        floating.setAttribute 'data-open', ''
+        floating.setAttribute 'data-placement', @placement
+        heading = floating.querySelector('h1,h2,h3,h4,h5,h6')
+        if heading
+          heading.id ?= "#{_id}-title"
+          floating.setAttribute 'aria-labelledby', heading.id
+        desc = floating.querySelector('p')
+        if desc
+          desc.id ?= "#{_id}-desc"
+          floating.setAttribute 'aria-describedby', desc.id
+      else
+        floating.removeAttribute 'data-open'
+
+  ~>
+    return unless _ready
+    if open
+      onDown = (e) =>
+        trigger = @_content?.querySelector('[data-trigger]')
+        floating = @_content?.querySelector('[data-content]')
+        unless trigger?.contains(e.target) or floating?.contains(e.target)
+          @close()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+
+  onKeydown: (e) ->
+    if e.key is 'Escape' and open
+      e.preventDefault()
+      @close()
+
+  render
+    div ref: "_content"
+      slot

package/docs/ui/preview-card.rip

@@ -0,0 +1,73 @@
+# PreviewCard — accessible headless hover preview card
+#
+# Shows a floating card on hover/focus of a trigger element. Dismisses
+# on mouse leave or blur. Ships zero CSS.
+#
+# Usage:
+#   PreviewCard delay: 400
+#     a $trigger: true, href: "/user/42", "View Profile"
+#     div $content: true
+#       p "User details here..."
+
+export PreviewCard = component
+  @delay := 400
+  @closeDelay := 200
+
+  open := false
+  _ready := false
+  _openTimer := null
+  _closeTimer := null
+
+  beforeUnmount: ->
+    clearTimeout _openTimer if _openTimer
+    clearTimeout _closeTimer if _closeTimer
+
+  mounted: ->
+    _ready = true
+    trigger = @_root?.querySelector('[data-trigger]')
+    return unless trigger
+    trigger.addEventListener 'mouseenter', =>
+      clearTimeout _closeTimer if _closeTimer
+      _openTimer = setTimeout (=> open = true; @_position()), @delay
+    trigger.addEventListener 'mouseleave', =>
+      clearTimeout _openTimer if _openTimer
+      _closeTimer = setTimeout (=> open = false), @closeDelay
+    trigger.addEventListener 'focus', =>
+      clearTimeout _closeTimer if _closeTimer
+      _openTimer = setTimeout (=> open = true; @_position()), @delay
+    trigger.addEventListener 'blur', =>
+      clearTimeout _openTimer if _openTimer
+      _closeTimer = setTimeout (=> open = false), @closeDelay
+
+  _position: ->
+    trigger = @_root?.querySelector('[data-trigger]')
+    floating = @_root?.querySelector('[data-content]')
+    return unless trigger and floating
+    @_root.style.position = 'relative'
+    tr = trigger.getBoundingClientRect()
+    cr = @_root.getBoundingClientRect()
+    floating.style.position = 'absolute'
+    floating.style.left = "0px"
+    floating.style.top = "#{tr.bottom - cr.top + 4}px"
+    floating.style.zIndex = '50'
+
+  ~>
+    return unless _ready
+    floating = @_root?.querySelector('[data-content]')
+    return unless floating
+    floating.hidden = not open
+    if open
+      floating.setAttribute 'data-open', ''
+      onEnter = => clearTimeout _closeTimer if _closeTimer
+      onLeave = => _closeTimer = setTimeout (=> open = false), @closeDelay
+      floating.addEventListener 'mouseenter', onEnter
+      floating.addEventListener 'mouseleave', onLeave
+      return ->
+        floating.removeEventListener 'mouseenter', onEnter
+        floating.removeEventListener 'mouseleave', onLeave
+    else
+      floating.removeAttribute 'data-open'
+
+  render
+    div ref: "_root"
+      slot

package/docs/ui/progress.rip

@@ -0,0 +1,25 @@
+# Progress — accessible headless progress bar
+#
+# Exposes progress value as CSS custom property for styling.
+# Ships zero CSS.
+#
+# Usage:
+#   Progress value: 0.65
+#   Progress value: 42, max: 100
+
+export Progress = component
+  @value := 0
+  @max := 1
+  @label := null
+
+  percent ~= Math.min(100, Math.max(0, (@value / @max) * 100))
+
+  render
+    div role: "progressbar"
+      aria-valuenow: @value
+      aria-valuemin: 0
+      aria-valuemax: @max
+      aria-label: @label?!
+      style: "--progress-value: #{@value}; --progress-percent: #{percent}%"
+      $complete: (percent >= 100)?!
+      slot

package/docs/ui/radio-group.rip

@@ -0,0 +1,67 @@
+# RadioGroup — accessible headless radio group
+#
+# Exactly one option can be selected. Arrow keys move focus and selection.
+# Ships zero CSS.
+#
+# Usage:
+#   RadioGroup value <=> size
+#     div $value: "sm", "Small"
+#     div $value: "md", "Medium"
+#     div $value: "lg", "Large"
+
+export RadioGroup = component
+  @value := null
+  @disabled := false
+  @orientation := 'vertical'
+  @name := ''
+
+  _options ~=
+    return [] unless @_slot
+    Array.from(@_slot.querySelectorAll('[data-value]') or [])
+
+  _select: (val) ->
+    return if @disabled
+    @value = val
+    @emit 'change', @value
+
+  onKeydown: (e) ->
+    radios = @_root?.querySelectorAll('[role="radio"]')
+    return unless radios?.length
+    focused = Array.from(radios).indexOf(document.activeElement)
+    return if focused < 0
+    len = radios.length
+    next = focused
+    switch e.key
+      when 'ArrowRight', 'ArrowDown'
+        e.preventDefault()
+        next = (focused + 1) %% len
+      when 'ArrowLeft', 'ArrowUp'
+        e.preventDefault()
+        next = (focused - 1) %% len
+      when 'Home'
+        e.preventDefault()
+        next = 0
+      when 'End'
+        e.preventDefault()
+        next = len - 1
+      else return
+    radios[next]?.focus()
+    @_select(_options[next]?.dataset.value)
+
+  render
+    div ref: "_root", role: "radiogroup", aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+
+      . ref: "_slot", style: "display:none"
+        slot
+
+      for opt, idx in _options
+        button role: "radio"
+          tabindex: (if (opt.dataset.value is @value) or (@value is null and idx is 0) then "0" else "-1")
+          aria-checked: opt.dataset.value is @value
+          $checked: (opt.dataset.value is @value)?!
+          $disabled: @disabled?!
+          $value: opt.dataset.value
+          @click: (=> @_select(opt.dataset.value))
+          = opt.textContent

package/docs/ui/scroll-area.rip

@@ -0,0 +1,145 @@
+# ScrollArea — accessible headless custom scrollbar
+#
+# Renders custom scrollbar thumb that tracks scroll position. Thumb is
+# draggable and the track is clickable. Auto-hides when not scrolling.
+# Ships zero CSS.
+#
+# Usage:
+#   ScrollArea
+#     div "Long scrollable content..."
+
+MIN_THUMB = 20
+
+export ScrollArea = component
+  @orientation := 'vertical'
+
+  hovering := false
+  scrolling := false
+  _scrollTimer = null
+  _dragStart = 0
+  _dragScrollStart = 0
+  _dragging = false
+  _ready := false
+
+  _updateThumb: ->
+    vp = @_viewport
+    sb = @_scrollbar
+    th = @_thumb
+    return unless vp and sb and th
+    vert = @orientation is 'vertical'
+
+    vpSize = if vert then vp.clientHeight else vp.clientWidth
+    scSize = if vert then vp.scrollHeight else vp.scrollWidth
+    sbSize = if vert then sb.clientHeight else sb.clientWidth
+    scrollPos = if vert then vp.scrollTop else vp.scrollLeft
+
+    ratio = vpSize / (scSize or 1)
+    if ratio >= 1
+      th.style.display = 'none'
+      return
+    th.style.display = ''
+
+    thumbPx = Math.max(MIN_THUMB, sbSize * ratio)
+    scrollRange = scSize - vpSize
+    maxOffset = sbSize - thumbPx
+    posPx = if scrollRange > 0 then Math.min(maxOffset, Math.max(0, (scrollPos / scrollRange) * maxOffset)) else 0
+
+    if vert
+      th.style.height = "#{thumbPx}px"
+      th.style.transform = "translate3d(0,#{posPx}px,0)"
+    else
+      th.style.width = "#{thumbPx}px"
+      th.style.transform = "translate3d(#{posPx}px,0,0)"
+
+  _onScroll: ->
+    scrolling = true
+    clearTimeout _scrollTimer if _scrollTimer
+    _scrollTimer = setTimeout (-> scrolling = false), 800
+    @_updateThumb()
+
+  _onTrackClick: (e) ->
+    return if e.target is @_thumb
+    vp = @_viewport
+    sb = @_scrollbar
+    th = @_thumb
+    return unless vp and sb and th
+    vert = @orientation is 'vertical'
+    rect = sb.getBoundingClientRect()
+    thumbPx = if vert then th.offsetHeight else th.offsetWidth
+
+    if vert
+      clickPos = e.clientY - rect.top - thumbPx / 2
+      maxOffset = rect.height - thumbPx
+      ratio = Math.max(0, Math.min(1, clickPos / maxOffset))
+      vp.scrollTop = ratio * (vp.scrollHeight - vp.clientHeight)
+    else
+      clickPos = e.clientX - rect.left - thumbPx / 2
+      maxOffset = rect.width - thumbPx
+      ratio = Math.max(0, Math.min(1, clickPos / maxOffset))
+      vp.scrollLeft = ratio * (vp.scrollWidth - vp.clientWidth)
+
+  _onThumbDown: (e) ->
+    return if e.button isnt 0
+    e.preventDefault()
+    e.stopPropagation()
+    _dragging = true
+    if @orientation is 'vertical'
+      _dragStart = e.clientY
+      _dragScrollStart = @_viewport.scrollTop
+    else
+      _dragStart = e.clientX
+      _dragScrollStart = @_viewport.scrollLeft
+    @_thumb.setPointerCapture e.pointerId
+
+  _onThumbMove: (e) ->
+    return unless _dragging
+    vp = @_viewport
+    sb = @_scrollbar
+    th = @_thumb
+    return unless vp and sb and th
+    vert = @orientation is 'vertical'
+    thumbPx = if vert then th.offsetHeight else th.offsetWidth
+    sbSize = if vert then sb.clientHeight else sb.clientWidth
+    maxOffset = sbSize - thumbPx
+    return if maxOffset <= 0
+
+    delta = if vert then e.clientY - _dragStart else e.clientX - _dragStart
+    scrollRange = if vert then vp.scrollHeight - vp.clientHeight else vp.scrollWidth - vp.clientWidth
+    newPos = _dragScrollStart + (delta / maxOffset) * scrollRange
+
+    if vert then vp.scrollTop = newPos else vp.scrollLeft = newPos
+
+  _onThumbUp: (e) ->
+    _dragging = false
+    @_thumb.releasePointerCapture e.pointerId
+
+  mounted: ->
+    _ready = true
+    requestAnimationFrame => @_updateThumb()
+    if @_viewport
+      @_resizeObs = new ResizeObserver => @_updateThumb()
+      @_resizeObs.observe @_viewport
+      @_resizeObs.observe @_viewport.firstElementChild if @_viewport.firstElementChild
+
+  beforeUnmount: ->
+    @_resizeObs?.disconnect()
+
+  render
+    div $orientation: @orientation
+      $hovering: hovering?!
+      $scrolling: scrolling?!
+      $dragging: _dragging?!
+      @mouseenter: (=> hovering = true)
+      @mouseleave: (=> hovering = false)
+
+      div ref: "_viewport", $viewport: true
+        style: "overflow:scroll;scrollbar-width:none"
+        @scroll: @_onScroll
+        slot
+
+      div ref: "_scrollbar", $scrollbar: true
+        @click: @_onTrackClick
+        div ref: "_thumb", $thumb: true
+          @pointerdown: @_onThumbDown
+          @pointermove: @_onThumbMove
+          @pointerup: @_onThumbUp