frutjam 2.3.0-beta.0 → 2.3.0

package/packages/js/combobox.js

@@ -0,0 +1,101 @@
+let _comboboxIdCounter = 0
+
+export function createCombobox(el) {
+  const input = el.querySelector('input')
+  let activeIndex = -1
+
+  const uid = ++_comboboxIdCounter
+  const listbox = el.querySelector('[role="listbox"]') ?? el.querySelector('.combobox-dropdown') ?? (() => {
+    const found = el.querySelector('.combobox-item, [role="option"]')
+    return found ? found.parentElement : null
+  })()
+
+  if (listbox && !listbox.id) listbox.id = `fj-combobox-listbox-${uid}`
+  if (listbox && !listbox.getAttribute('role')) listbox.setAttribute('role', 'listbox')
+  if (input && listbox) {
+    input.setAttribute('aria-controls', listbox.id)
+    if (!input.getAttribute('role')) input.setAttribute('role', 'combobox')
+    if (!input.getAttribute('aria-autocomplete')) input.setAttribute('aria-autocomplete', 'list')
+  }
+
+  const allOptions = () => Array.from(el.querySelectorAll('[role="option"], .combobox-item'))
+  const visibleOptions = () => allOptions().filter((o) => !o.hidden)
+
+  function open() {
+    el.classList.add('combobox-open')
+    input?.setAttribute('aria-expanded', 'true')
+  }
+
+  function close() {
+    el.classList.remove('combobox-open')
+    input?.setAttribute('aria-expanded', 'false')
+    highlight(-1)
+  }
+
+  function toggle() {
+    el.classList.contains('combobox-open') ? close() : open()
+  }
+
+  function filter(query) {
+    allOptions().forEach((opt) => {
+      opt.hidden = !opt.textContent.toLowerCase().includes(query.toLowerCase())
+    })
+    highlight(-1)
+  }
+
+  function highlight(index) {
+    const opts = visibleOptions()
+    opts.forEach((o, i) => {
+      o.classList.remove('combobox-item-active')
+      if (!o.id) o.id = `fj-combobox-option-${uid}-${i}`
+    })
+    if (index >= 0 && opts[index]) {
+      opts[index].classList.add('combobox-item-active')
+      opts[index].scrollIntoView({ block: 'nearest' })
+      input?.setAttribute('aria-activedescendant', opts[index].id)
+    } else {
+      input?.removeAttribute('aria-activedescendant')
+    }
+    activeIndex = index
+  }
+
+  function select(opt) {
+    if (input) input.value = opt.textContent.trim()
+    el.dispatchEvent(new CustomEvent('fj:select', { detail: { value: opt.dataset.value ?? opt.textContent.trim() } }))
+    close()
+  }
+
+  input?.addEventListener('input', (e) => {
+    open()
+    filter(e.target.value)
+  })
+
+  input?.addEventListener('keydown', (e) => {
+    const opts = visibleOptions()
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!el.classList.contains('combobox-open')) { open(); return }
+      highlight(Math.min(activeIndex + 1, opts.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      highlight(Math.max(activeIndex - 1, 0))
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      e.preventDefault()
+      select(opts[activeIndex])
+    } else if (e.key === 'Escape') {
+      close()
+    }
+  })
+
+  el.addEventListener('click', (e) => {
+    const opt = e.target.closest('[role="option"], .combobox-item')
+    if (opt) { select(opt); return }
+    if (e.target === input) open()
+  })
+
+  document.addEventListener('click', (e) => {
+    if (!el.contains(e.target)) close()
+  }, { capture: true })
+
+  return { open, close, toggle, filter }
+}

package/packages/js/drawer.js

@@ -0,0 +1 @@
+export { createModal as createDrawer } from './modal.js'

package/packages/js/index.js

@@ -0,0 +1,8 @@
+export { createModal } from './modal.js'
+export { createDrawer } from './drawer.js'
+export { createCollapsible } from './collapsible.js'
+export { createTooltip } from './tooltip.js'
+export { createTabs } from './tabs.js'
+export { createToastManager } from './toast.js'
+export { createCarousel } from './carousel.js'
+export { createCombobox } from './combobox.js'

package/packages/js/modal.js

@@ -0,0 +1,8 @@
+export function createModal(el) {
+  return {
+    open: () => el.showModal(),
+    close: () => el.close(),
+    toggle: () => (el.open ? el.close() : el.showModal()),
+    isOpen: () => el.open,
+  }
+}

package/packages/js/tabs.js

@@ -0,0 +1,89 @@
+let _tabsIdCounter = 0
+
+export function createTabs(tabsEl, panelsEl) {
+  const uid = ++_tabsIdCounter
+  const getTabs = () => Array.from(tabsEl.querySelectorAll('.tab'))
+  const getPanels = () => (panelsEl ? Array.from(panelsEl.children) : [])
+
+  if (!tabsEl.getAttribute('role')) tabsEl.setAttribute('role', 'tablist')
+
+  function initAria() {
+    getTabs().forEach((tab, i) => {
+      if (!tab.id) tab.id = `fj-tab-${uid}-${i}`
+      if (!tab.getAttribute('role')) tab.setAttribute('role', 'tab')
+    })
+    getPanels().forEach((panel, i) => {
+      if (!panel.id) panel.id = `fj-panel-${uid}-${i}`
+      if (!panel.getAttribute('role')) panel.setAttribute('role', 'tabpanel')
+      const tab = getTabs()[i]
+      if (tab && !panel.getAttribute('aria-labelledby')) {
+        panel.setAttribute('aria-labelledby', tab.id)
+      }
+      if (!panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '0')
+    })
+    getTabs().forEach((tab, i) => {
+      const panel = getPanels()[i]
+      if (panel && !tab.getAttribute('aria-controls')) {
+        tab.setAttribute('aria-controls', panel.id)
+      }
+    })
+  }
+
+  function activate(index) {
+    getTabs().forEach((tab, i) => {
+      const active = i === index
+      tab.classList.toggle('tab-active', active)
+      tab.setAttribute('aria-selected', String(active))
+      tab.setAttribute('tabindex', active ? '0' : '-1')
+    })
+    getPanels().forEach((panel, i) => {
+      panel.hidden = i !== index
+    })
+  }
+
+  initAria()
+
+  tabsEl.addEventListener('click', (e) => {
+    const tab = e.target.closest('.tab')
+    if (tab) activate(getTabs().indexOf(tab))
+  })
+
+  tabsEl.addEventListener('keydown', (e) => {
+    const tabs = getTabs()
+    const current = tabs.findIndex((t) => t === document.activeElement)
+    if (current === -1) return
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = (current + 1) % tabs.length
+      activate(next)
+      tabs[next].focus()
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      const prev = (current - 1 + tabs.length) % tabs.length
+      activate(prev)
+      tabs[prev].focus()
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      activate(0)
+      tabs[0].focus()
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      activate(tabs.length - 1)
+      tabs[tabs.length - 1].focus()
+    }
+  })
+
+  return {
+    activate,
+    next() {
+      const all = getTabs()
+      const current = all.findIndex((t) => t.classList.contains('tab-active'))
+      activate((current + 1) % all.length)
+    },
+    prev() {
+      const all = getTabs()
+      const current = all.findIndex((t) => t.classList.contains('tab-active'))
+      activate((current - 1 + all.length) % all.length)
+    },
+  }
+}

package/packages/js/toast.js

@@ -0,0 +1,27 @@
+export function createToastManager(containerEl) {
+  containerEl.setAttribute('aria-live', 'polite')
+  containerEl.setAttribute('aria-atomic', 'false')
+
+  function show(message, { duration = 3000, type = '' } = {}) {
+    const el = document.createElement('div')
+    el.className = ['alert', type && `alert-${type}`].filter(Boolean).join(' ')
+    el.textContent = message
+    if (type === 'error' || type === 'warning') {
+      el.setAttribute('role', 'alert')
+    } else {
+      el.setAttribute('role', 'status')
+    }
+    containerEl.appendChild(el)
+    if (duration > 0) setTimeout(() => el.remove(), duration)
+    return el
+  }
+
+  return {
+    show,
+    success: (msg, opts) => show(msg, { ...opts, type: 'success' }),
+    error: (msg, opts) => show(msg, { ...opts, type: 'error' }),
+    warning: (msg, opts) => show(msg, { ...opts, type: 'warning' }),
+    info: (msg, opts) => show(msg, { ...opts, type: 'info' }),
+    dismiss: (el) => el?.remove(),
+  }
+}

package/packages/js/tooltip.js

@@ -0,0 +1,8 @@
+export function createTooltip(el) {
+  return {
+    show: () => el.classList.add('tooltip-open'),
+    hide: () => el.classList.remove('tooltip-open'),
+    toggle: () => el.classList.toggle('tooltip-open'),
+    isOpen: () => el.classList.contains('tooltip-open'),
+  }
+}

package/packages/react/index.js

@@ -0,0 +1,8 @@
+export { useModal } from './useModal.js'
+export { useDrawer } from './useDrawer.js'
+export { useCollapsible } from './useCollapsible.js'
+export { useTooltip } from './useTooltip.js'
+export { useTabs } from './useTabs.js'
+export { useToast } from './useToast.js'
+export { useCarousel } from './useCarousel.js'
+export { useCombobox } from './useCombobox.js'

package/packages/react/useCarousel.js

@@ -0,0 +1,23 @@
+import { useRef, useCallback, useState } from 'react'
+
+export function useCarousel() {
+  const ref = useRef(null)
+  const [current, setCurrent] = useState(0)
+
+  const goTo = useCallback((index) => {
+    if (!ref.current) return
+    const items = Array.from(ref.current.querySelectorAll('.carousel-item'))
+    if (!items.length) return
+    const next = Math.max(0, Math.min(index, items.length - 1))
+    setCurrent(next)
+    items[next].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+  }, [])
+
+  return {
+    ref,
+    current,
+    goTo,
+    next: useCallback(() => goTo(current + 1), [current, goTo]),
+    prev: useCallback(() => goTo(current - 1), [current, goTo]),
+  }
+}

package/packages/react/useCollapsible.js

@@ -0,0 +1,20 @@
+import { useRef, useCallback } from 'react'
+
+export function useCollapsible() {
+  const ref = useRef(null)
+
+  function syncAria() {
+    if (!ref.current) return
+    const isOpen = ref.current.classList.contains('collapsible-open')
+    const trigger = ref.current.querySelector('[aria-expanded]')
+    if (trigger) trigger.setAttribute('aria-expanded', String(isOpen))
+  }
+
+  return {
+    ref,
+    open: useCallback(() => { ref.current?.classList.add('collapsible-open'); syncAria() }, []),
+    close: useCallback(() => { ref.current?.classList.remove('collapsible-open'); syncAria() }, []),
+    toggle: useCallback(() => { ref.current?.classList.toggle('collapsible-open'); syncAria() }, []),
+    isOpen: () => ref.current?.classList.contains('collapsible-open') ?? false,
+  }
+}

package/packages/react/useCombobox.js

@@ -0,0 +1,81 @@
+import { useState, useCallback, useId } from 'react'
+
+export function useCombobox({ items = [], filterFn } = {}) {
+  const uid = useId()
+  const listboxId = `${uid}-listbox`
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const [value, setValue] = useState('')
+
+  const filtered = filterFn
+    ? filterFn(items, query)
+    : items.filter((item) =>
+        String(item.label ?? item).toLowerCase().includes(query.toLowerCase())
+      )
+
+  const activeDescendant = activeIndex >= 0 ? `${uid}-option-${activeIndex}` : undefined
+
+  const select = useCallback((item) => {
+    const label = item.label ?? String(item)
+    setValue(label)
+    setQuery(label)
+    setOpen(false)
+    setActiveIndex(-1)
+  }, [])
+
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!open) { setOpen(true); return }
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      e.preventDefault()
+      select(filtered[activeIndex])
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      setActiveIndex(-1)
+    }
+  }, [open, filtered, activeIndex, select])
+
+  return {
+    open,
+    value,
+    query,
+    filtered,
+    activeIndex,
+    select,
+    containerProps: {
+      className: open ? 'combobox combobox-open' : 'combobox',
+    },
+    inputProps: {
+      value: query,
+      onChange: (e) => { setQuery(e.target.value); setOpen(true); setActiveIndex(-1) },
+      onKeyDown: handleKeyDown,
+      onFocus: () => setOpen(true),
+      onBlur: () => setTimeout(() => setOpen(false), 150),
+      role: 'combobox',
+      'aria-expanded': open,
+      'aria-autocomplete': 'list',
+      'aria-controls': listboxId,
+      'aria-activedescendant': activeDescendant,
+    },
+    listboxProps: {
+      id: listboxId,
+      role: 'listbox',
+    },
+    optionProps: (item, index) => ({
+      id: `${uid}-option-${index}`,
+      className: activeIndex === index ? 'combobox-option combobox-option-active' : 'combobox-option',
+      role: 'option',
+      'aria-selected': activeIndex === index,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => select(item),
+      onMouseEnter: () => setActiveIndex(index),
+    }),
+  }
+}

package/packages/react/useDrawer.js

@@ -0,0 +1 @@
+export { useModal as useDrawer } from './useModal.js'

package/packages/react/useModal.js

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from 'react'
+
+export function useModal() {
+  const ref = useRef(null)
+  return {
+    ref,
+    open: useCallback(() => ref.current?.showModal(), []),
+    close: useCallback(() => ref.current?.close(), []),
+    toggle: useCallback(() => (ref.current?.open ? ref.current.close() : ref.current?.showModal()), []),
+    isOpen: () => ref.current?.open ?? false,
+  }
+}

package/packages/react/useTabs.js

@@ -0,0 +1,53 @@
+import { useState, useCallback, useId } from 'react'
+
+export function useTabs(initialIndex = 0) {
+  const uid = useId()
+  const [active, setActive] = useState(initialIndex)
+
+  const activate = useCallback((index) => setActive(index), [])
+
+  const tabId = (index) => `${uid}-tab-${index}`
+  const panelId = (index) => `${uid}-panel-${index}`
+
+  const handleKeyDown = useCallback((index, count) => (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      activate((index + 1) % count)
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      activate((index - 1 + count) % count)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      activate(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      activate(count - 1)
+    }
+  }, [activate])
+
+  return {
+    active,
+    activate,
+    isActive: (index) => active === index,
+    tablistProps: {
+      role: 'tablist',
+    },
+    tabProps: (index, count = 0) => ({
+      id: tabId(index),
+      className: active === index ? 'tab tab-active' : 'tab',
+      onClick: () => activate(index),
+      onKeyDown: handleKeyDown(index, count),
+      role: 'tab',
+      'aria-selected': active === index,
+      'aria-controls': panelId(index),
+      tabIndex: active === index ? 0 : -1,
+    }),
+    panelProps: (index) => ({
+      id: panelId(index),
+      hidden: active !== index,
+      role: 'tabpanel',
+      'aria-labelledby': tabId(index),
+      tabIndex: 0,
+    }),
+  }
+}

package/packages/react/useToast.js

@@ -0,0 +1,27 @@
+import { useState, useCallback, useRef } from 'react'
+
+export function useToast() {
+  const [toasts, setToasts] = useState([])
+  const idRef = useRef(0)
+
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const show = useCallback((message, { duration = 3000, type = '' } = {}) => {
+    const id = ++idRef.current
+    setToasts((prev) => [...prev, { id, message, type }])
+    if (duration > 0) setTimeout(() => dismiss(id), duration)
+    return id
+  }, [dismiss])
+
+  return {
+    toasts,
+    show,
+    dismiss,
+    success: (msg, opts) => show(msg, { ...opts, type: 'success' }),
+    error: (msg, opts) => show(msg, { ...opts, type: 'error' }),
+    warning: (msg, opts) => show(msg, { ...opts, type: 'warning' }),
+    info: (msg, opts) => show(msg, { ...opts, type: 'info' }),
+  }
+}

package/packages/react/useTooltip.js

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from 'react'
+
+export function useTooltip() {
+  const ref = useRef(null)
+  return {
+    ref,
+    show: useCallback(() => ref.current?.classList.add('tooltip-open'), []),
+    hide: useCallback(() => ref.current?.classList.remove('tooltip-open'), []),
+    toggle: useCallback(() => ref.current?.classList.toggle('tooltip-open'), []),
+    isOpen: () => ref.current?.classList.contains('tooltip-open') ?? false,
+  }
+}

package/packages/unocss/index.js

@@ -0,0 +1,77 @@
+import { symbols } from "@unocss/core"
+// Generated by scripts/build-unocss.mjs from the same objects the Tailwind
+// plugin ships, so the two cannot describe different components.
+import { rules as tokenRules, preflight, base, components } from "../../dist/unocss/map.js"
+
+/**
+ * Frutjam as an UnoCSS preset.
+ *
+ * Every class the Tailwind plugin generates is available here too, so
+ * `class="btn btn-error"` works, and with presetAttributify so does
+ * `btn="error xl"`. Only what you use is emitted.
+ *
+ * Bodies go through symbols.body rather than a plain object, because several
+ * components nest, and symbols.body takes nested CSS while leaving variants
+ * intact. That is what keeps `md:btn-error` and `hover:card-primary` working.
+ *
+ * @param {object}  [options]
+ * @param {boolean} [options.preflight=true]  Emit Frutjam's tokens, reset and
+ *                                            themes. Turn off if you already
+ *                                            import frutjam/css/base yourself.
+ * @param {string}  [options.prefix='']       Matches the Tailwind plugin's
+ *                                            prefix option, so `fj` gives
+ *                                            fj-btn and fj-btn="error".
+ * @param {string}  [options.layer='frutjam'] Cascade layer for the components.
+ */
+export function presetFrutjam(options = {}) {
+  const { preflight: withPreflight = true, prefix = "", layer = "frutjam" } = options
+
+  const p = prefix ? `${prefix}-` : ""
+  const named = (token) => `${p}${token}`
+  const componentAttrs = new Set(components.map(named))
+
+  /*
+   * `btn="error xl"` expands to btn-error and btn-xl and never to a bare btn,
+   * so the component itself would be missing. Asking for it here, at extraction
+   * time, keeps it free of whatever variant the attribute carried: with
+   * `btn="md:error"` the button must exist at every width and only the colour
+   * belongs inside the media query.
+   */
+  const attributeBaseExtractor = {
+    name: "frutjam-attribute-base",
+    order: -1,
+    extract({ code }) {
+      const found = new Set()
+      for (const match of code.matchAll(/(?:^|[\s"'`])([a-z][a-z0-9-]*)\s*=\s*["']/g)) {
+        if (componentAttrs.has(match[1])) found.add(match[1])
+      }
+      return found
+    },
+  }
+
+  // Static rules rather than one catch-all regex: UnoCSS can look these up
+  // directly instead of running a pattern against every token it sees.
+  const rules = Object.entries(tokenRules).map(([token, body]) => {
+    const css = { [symbols.body]: body }
+    // A component answers to its class and to its attribute. UnoCSS merges the
+    // two into one selector list when both appear, so this costs nothing.
+    if (componentAttrs.has(named(token))) {
+      css[symbols.selector] = (selector) => `${selector},[${named(token)}]`
+    }
+    return [named(token), css, { layer }]
+  })
+
+  const preflights = [{ layer, getCSS: () => preflight }]
+  if (withPreflight) preflights.unshift({ layer, getCSS: () => base })
+
+  return {
+    name: "frutjam",
+    layers: { [layer]: -1 },
+    extractors: [attributeBaseExtractor],
+    rules,
+    preflights,
+    autocomplete: { templates: Object.keys(tokenRules).map(named) },
+  }
+}
+
+export default presetFrutjam