@rip-lang/ui 0.1.3 → 0.3.1

package/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/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/package.json

@@ -1,29 +1,21 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.1.3",
-  "description": "Zero-build reactive web framework — VFS, file-based routing, reactive stash",
+  "version": "0.3.1",
+  "description": "Headless, accessible UI components written in Rip — zero CSS, zero dependencies",
   "type": "module",
-  "main": "ui.js",
-  "exports": {
-    ".": "./ui.js",
-    "./stash": "./stash.js",
-    "./vfs": "./vfs.js",
-    "./router": "./router.js",
-    "./renderer": "./renderer.js",
-    "./serve": "./serve.rip"
-  },
-  "scripts": {
-    "test": "echo \"Tests coming soon\" && exit 0"
-  },
   "keywords": [
     "ui",
-    "framework",
-    "reactive",
-    "vfs",
-    "router",
-    "stash",
-    "signals",
-    "no-build",
+    "headless",
+    "accessible",
+    "components",
+    "widgets",
+    "aria",
+    "wai-aria",
+    "select",
+    "dialog",
+    "grid",
+    "combobox",
+    "tabs",
     "rip",
     "rip-lang"
   ],
@@ -39,23 +31,10 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "rip-lang": "^3.4.4"
+    "rip-lang": ">=3.13.56"
   },
   "files": [
-    "ui.js",
-    "stash.js",
-    "vfs.js",
-    "router.js",
-    "renderer.js",
-    "serve.rip",
+    "*.rip",
     "README.md"
-  ],
-  "peerDependencies": {
-    "@rip-lang/api": ">=1.1.4"
-  },
-  "peerDependenciesMeta": {
-    "@rip-lang/api": {
-      "optional": true
-    }
-  }
+  ]
 }

package/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/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/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/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