@rip-lang/ui 0.3.0 → 0.3.1

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()

package/dialog.rip

@@ -0,0 +1,107 @@
+# Dialog — accessible headless modal dialog
+#
+# Traps focus, locks scroll, dismisses on Escape or click outside.
+# Restores focus to the previously focused element on close.
+# Auto-wires aria-labelledby (first h1-h6) and aria-describedby (first p).
+#
+# Exposes $open on the backdrop. Ships zero CSS.
+#
+# Usage:
+#   Dialog open <=> showDialog, @close: handleClose
+#     h2 "Title"
+#     p "Content"
+#     button @click: (=> showDialog = false), "Close"
+
+dialogStack = []
+
+export Dialog = component
+  @open := false
+  @dismissable := true
+  @initialFocus := null
+
+  _prevFocus = null
+  _cleanupTrap = null
+  _scrollY = 0
+  _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
+
+  _wireAria: ->
+    panel = @_panel
+    return unless panel
+    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
+    if heading
+      heading.id ?= "#{_id}-title"
+      panel.setAttribute 'aria-labelledby', heading.id
+    desc = panel.querySelector('p')
+    if desc
+      desc.id ?= "#{_id}-desc"
+      panel.setAttribute 'aria-describedby', desc.id
+
+  ~>
+    if @open
+      _prevFocus = document.activeElement
+      _scrollY = window.scrollY
+      dialogStack.push this
+      document.body.style.position = 'fixed'
+      document.body.style.top = "-#{_scrollY}px"
+      document.body.style.width = '100%'
+
+      setTimeout =>
+        panel = @_panel
+        if panel
+          @_wireAria()
+          if @initialFocus
+            target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
+            target?.focus()
+          else
+            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+            focusable[0]?.focus()
+          _cleanupTrap = (e) ->
+            return unless e.key is 'Tab'
+            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
+            return unless list.length
+            first = list[0]
+            last = list[list.length - 1]
+            if e.shiftKey
+              if document.activeElement is first then (e.preventDefault(); last.focus())
+            else
+              if document.activeElement is last then (e.preventDefault(); first.focus())
+          panel.addEventListener 'keydown', _cleanupTrap
+      , 0
+
+      return ->
+        idx = dialogStack.indexOf this
+        dialogStack.splice(idx, 1) if idx >= 0
+        document.body.style.position = '' unless dialogStack.length
+        document.body.style.top = '' unless dialogStack.length
+        document.body.style.width = '' unless dialogStack.length
+        window.scrollTo 0, _scrollY unless dialogStack.length
+        _prevFocus?.focus()
+    else
+      idx = dialogStack.indexOf this
+      dialogStack.splice(idx, 1) if idx >= 0
+      unless dialogStack.length
+        document.body.style.position = ''
+        document.body.style.top = ''
+        document.body.style.width = ''
+        window.scrollTo 0, _scrollY
+      _prevFocus?.focus()
+
+  close: ->
+    @open = false
+    @emit 'close'
+
+  onKeydown: (e) ->
+    if e.key is 'Escape' and dialogStack[dialogStack.length - 1] is this
+      e.preventDefault()
+      @close() if @dismissable
+
+  onBackdropClick: (e) ->
+    @close() if e.target is e.currentTarget and @dismissable
+
+  render
+    if @open
+      div ref: "_backdrop", $open: true,
+        @click: @onBackdropClick,
+        @keydown: @onKeydown
+        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
+          slot

package/drawer.rip

@@ -0,0 +1,79 @@
+# Drawer — accessible headless slide-out panel
+#
+# A Dialog variant that slides from an edge of the screen.
+# Supports dismiss on escape, click-outside, and optional swipe-to-close.
+# Ships zero CSS.
+#
+# Usage:
+#   Drawer open <=> showDrawer, side: "right"
+#     h2 "Settings"
+#     p "Panel content here"
+
+export Drawer = component
+  @open := false
+  @side := 'right'
+  @dismissable := true
+
+  _prevFocus = null
+  _scrollY = 0
+  _id =! "drw-#{Math.random().toString(36).slice(2, 8)}"
+
+  _wireAria: ->
+    panel = @_panel
+    return unless panel
+    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
+    if heading
+      heading.id ?= "#{_id}-title"
+      panel.setAttribute 'aria-labelledby', heading.id
+    desc = panel.querySelector('p')
+    if desc
+      desc.id ?= "#{_id}-desc"
+      panel.setAttribute 'aria-describedby', desc.id
+
+  ~>
+    if @open
+      _prevFocus = document.activeElement
+      document.body.style.overflow = 'hidden'
+
+      setTimeout =>
+        panel = @_panel
+        if panel
+          @_wireAria()
+          focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+          focusable[0]?.focus()
+          @_trapHandler = (e) ->
+            return unless e.key is 'Tab'
+            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
+            return unless list.length
+            first = list[0]
+            last = list[list.length - 1]
+            if e.shiftKey
+              if document.activeElement is first then (e.preventDefault(); last.focus())
+            else
+              if document.activeElement is last then (e.preventDefault(); first.focus())
+          panel.addEventListener 'keydown', @_trapHandler
+      , 0
+    else
+      document.body.style.overflow = ''
+      _prevFocus?.focus()
+
+  close: ->
+    @open = false
+    @emit 'close'
+
+  onKeydown: (e) ->
+    if e.key is 'Escape' and @dismissable
+      e.preventDefault()
+      @close()
+
+  onBackdropClick: (e) ->
+    @close() if e.target is e.currentTarget and @dismissable
+
+  render
+    if @open
+      div ref: "_backdrop", $open: true, $side: @side
+        @click: @onBackdropClick
+        @keydown: @onKeydown
+        div ref: "_panel", role: "dialog", aria-modal: "true", tabindex: "-1"
+          $side: @side
+          slot

package/editable-value.rip

@@ -0,0 +1,80 @@
+# EditableValue — accessible headless inline editable value
+#
+# Displays a value with an edit trigger. Clicking opens a popover form.
+# Emits 'save' on submit. Ships zero CSS.
+#
+# Usage:
+#   EditableValue @save: handleSave
+#     span $display: true
+#       "John Doe"
+#     div $editor: true
+#       input type: "text", value: name, @input: (e) => name = e.target.value
+
+export EditableValue = component
+  @disabled := false
+
+  editing := false
+  saving := false
+
+  _onEdit: ->
+    return if @disabled
+    editing = true
+    requestAnimationFrame => @_position()
+
+  _onSave: ->
+    return if saving
+    saving = true
+    @emit 'save'
+
+  _onCancel: ->
+    editing = false
+    saving = false
+
+  close: ->
+    editing = false
+    saving = false
+
+  setSaving: (val) -> saving = val
+
+  _position: ->
+    display = @_root?.querySelector('[data-display]')
+    editor = @_root?.querySelector('[data-editor]')
+    return unless display and editor
+    @_root.style.position = 'relative'
+    dr = display.getBoundingClientRect()
+    cr = @_root.getBoundingClientRect()
+    editor.style.position = 'absolute'
+    editor.style.left = "0px"
+    editor.style.top = "#{dr.bottom - cr.top + 4}px"
+    editor.style.zIndex = '50'
+    editor.querySelector('input, textarea, select')?.focus()
+
+  ~>
+    display = @_root?.querySelector('[data-display]')
+    editor = @_root?.querySelector('[data-editor]')
+    return unless display and editor
+    editor.hidden = not editing
+    if editing
+      editor.setAttribute 'data-open', ''
+      onDown = (e) =>
+        unless @_root?.contains(e.target)
+          @_onCancel()
+      document.addEventListener 'mousedown', onDown
+      return -> document.removeEventListener 'mousedown', onDown
+    else
+      editor.removeAttribute 'data-open'
+
+  onKeydown: (e) ->
+    if e.key is 'Escape' and editing
+      e.preventDefault()
+      @_onCancel()
+    if e.key is 'Enter' and editing
+      e.preventDefault()
+      @_onSave()
+
+  render
+    div ref: "_root", $editing: editing?!, $disabled: @disabled?!, $saving: saving?!
+      slot
+      unless editing
+        button $edit-trigger: true, aria-label: "Edit", @click: @_onEdit
+          "✎"

package/field.rip

@@ -0,0 +1,53 @@
+# Field — accessible headless form field wrapper
+#
+# Associates a label, description, and error message with a form control.
+# Generates linked IDs for aria-labelledby/describedby/errormessage.
+# Ships zero CSS.
+#
+# Usage:
+#   Field label: "Email", error: errors.email
+#     Input value <=> email, type: "email"
+
+export Field = component
+  @label := ''
+  @description := ''
+  @error := ''
+  @disabled := false
+  @required := false
+
+  _id =! "fld-#{Math.random().toString(36).slice(2, 8)}"
+
+  mounted: ->
+    ctrl = @_root?.querySelector('input, select, textarea, button, [role]')
+    if ctrl
+      ctrl.setAttribute 'aria-labelledby', "#{_id}-label" if @label
+      ctrl.setAttribute 'aria-describedby', "#{_id}-desc" if @description
+      ctrl.setAttribute 'aria-errormessage', "#{_id}-err" if @error
+      ctrl.setAttribute 'aria-invalid', true if @error
+      ctrl.setAttribute 'aria-required', true if @required
+
+  ~>
+    ctrl = @_root?.querySelector('input, select, textarea, button, [role]')
+    return unless ctrl
+    if @error
+      ctrl.setAttribute 'aria-invalid', true
+      ctrl.setAttribute 'aria-errormessage', "#{_id}-err"
+    else
+      ctrl.removeAttribute 'aria-invalid'
+      ctrl.removeAttribute 'aria-errormessage'
+
+  render
+    div $disabled: @disabled?!, $invalid: @error?!
+      if @label
+        label id: "#{_id}-label", $label: true
+          @label
+          if @required
+            span $required: true, aria-hidden: "true"
+              " *"
+      slot
+      if @description and not @error
+        div id: "#{_id}-desc", $description: true
+          @description
+      if @error
+        div id: "#{_id}-err", role: "alert", $error: true
+          @error

package/fieldset.rip

@@ -0,0 +1,22 @@
+# Fieldset — accessible headless fieldset with legend
+#
+# Groups related fields with an optional legend. Disables all children
+# when @disabled is set. Ships zero CSS.
+#
+# Usage:
+#   Fieldset legend: "Shipping Address"
+#     Field label: "Street"
+#       Input value <=> street
+#     Field label: "City"
+#       Input value <=> city
+
+export Fieldset = component
+  @legend := ''
+  @disabled := false
+
+  render
+    fieldset disabled: @disabled, $disabled: @disabled?!
+      if @legend
+        legend $legend: true
+          @legend
+      slot

package/form.rip

@@ -0,0 +1,39 @@
+# Form — accessible headless form with validation and submission
+#
+# Wraps native <form> with submit handling, validation state, and
+# loading indicator support. Prevents default submission and emits
+# a 'submit' event. Ships zero CSS.
+#
+# Usage:
+#   Form @submit: handleSubmit
+#     Field label: "Name"
+#       Input value <=> name
+#     Button
+#       "Submit"
+
+export Form = component
+  @disabled := false
+
+  submitting := false
+  submitted := false
+  errors := {}
+
+  _onSubmit: (e) ->
+    e.preventDefault()
+    return if @disabled or submitting
+    submitting = true
+    submitted = true
+    @emit 'submit', { form: e.target }
+
+  setErrors: (errs) ->
+    errors = errs or {}
+
+  setSubmitting: (val) ->
+    submitting = val
+
+  render
+    form @submit: @_onSubmit, novalidate: true
+      $disabled: @disabled?!
+      $submitting: submitting?!
+      $submitted: submitted?!
+      slot