frutjam 2.0.0 → 2.0.1

package/package.json

@@ -1,101 +1,101 @@
-{
-  "name": "frutjam",
-  "version": "2.0.0",
-  "description": "A utility-first CSS UI Library for Tailwind CSS",
-  "type": "module",
-  "exports": {
-    ".": "./dist/plugin.js",
-    "./postcss": "./index.js",
-    "./js": "./packages/js/index.js",
-    "./js/*": "./packages/js/*.js",
-    "./react": "./packages/react/index.js",
-    "./react/*": "./packages/react/*.js",
-    "./components/*": "./dist/components/*/index.js",
-    "./utilities/*": "./dist/utilities/*/index.js",
-    "./themes/*": "./dist/themes/*/index.js",
-    "./base/tokens": "./dist/base/tokens/index.js",
-    "./base/reboot": "./dist/base/reboot/index.js",
-    "./functions/addPrefix": "./dist/functions/addPrefix.js"
-  },
-  "files": [
-    "index.js",
-    "dist/",
-    "packages/"
-  ],
-  "style": "./dist/frutjam.min.css",
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "build:cdn": "node scripts/build-cdn.mjs",
-    "build:plugin": "node scripts/build-plugin.mjs",
-    "build": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
-    "prepublishOnly": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
-    "postversion": "git push origin main --tags"
-  },
-  "funding": "https://ko-fi.com/nezanuha",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nezanuha/frutjam.git"
-  },
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "keywords": [
-    "frutjam",
-    "tailwindcss",
-    "tailwind css plugin",
-    "UI Library",
-    "tailwind",
-    "components",
-    "tailwind components",
-    "tailwind component library",
-    "tailwind ui",
-    "tailwind ui library",
-    "tailwind next",
-    "tailwind nuxt",
-    "tailwind svelte",
-    "tailwind astro",
-    "tailwind django",
-    "tailwind rails",
-    "tailwind laravel",
-    "component library",
-    "tailwind themes",
-    "css library",
-    "theme",
-    "design system",
-    "front-end",
-    "framework",
-    "W3C standards",
-    "accessibility web development",
-    "seo friendly ui",
-    "rtl ui",
-    "responsive ui library"
-  ],
-  "author": "Nezanuha",
-  "license": "MIT",
-  "homepage": "https://frutjam.com",
-  "bugs": {
-    "url": "https://github.com/nezanuha/frutjam/issues"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "peerDependencies": {
-    "tailwindcss": "^4.0.0",
-    "react": ">=18"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
-    "autoprefixer": "^10.5.0",
-    "cssnano": "^7.1.7",
-    "postcss": "^8.5.13",
-    "postcss-js": "^5.1.0",
-    "rimraf": "^6.1.3",
-    "tailwindcss": "^4.2.4"
-  }
-}
+{
+  "name": "frutjam",
+  "version": "2.0.1",
+  "description": "A utility-first CSS UI Library for Tailwind CSS",
+  "type": "module",
+  "exports": {
+    ".": "./dist/plugin.js",
+    "./postcss": "./index.js",
+    "./js": "./packages/js/index.js",
+    "./js/*": "./packages/js/*.js",
+    "./react": "./packages/react/index.js",
+    "./react/*": "./packages/react/*.js",
+    "./components/*": "./dist/components/*/index.js",
+    "./utilities/*": "./dist/utilities/*/index.js",
+    "./themes/*": "./dist/themes/*/index.js",
+    "./base/tokens": "./dist/base/tokens/index.js",
+    "./base/reboot": "./dist/base/reboot/index.js",
+    "./functions/addPrefix": "./dist/functions/addPrefix.js"
+  },
+  "files": [
+    "index.js",
+    "dist/",
+    "packages/"
+  ],
+  "style": "./dist/frutjam.min.css",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build:cdn": "node scripts/build-cdn.mjs",
+    "build:plugin": "node scripts/build-plugin.mjs",
+    "build": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
+    "prepublishOnly": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
+    "postversion": "git push origin main --tags"
+  },
+  "funding": "https://ko-fi.com/nezanuha",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nezanuha/frutjam.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "frutjam",
+    "tailwindcss",
+    "tailwind css plugin",
+    "UI Library",
+    "tailwind",
+    "components",
+    "tailwind components",
+    "tailwind component library",
+    "tailwind ui",
+    "tailwind ui library",
+    "tailwind next",
+    "tailwind nuxt",
+    "tailwind svelte",
+    "tailwind astro",
+    "tailwind django",
+    "tailwind rails",
+    "tailwind laravel",
+    "component library",
+    "tailwind themes",
+    "css library",
+    "theme",
+    "design system",
+    "front-end",
+    "framework",
+    "W3C standards",
+    "accessibility web development",
+    "seo friendly ui",
+    "rtl ui",
+    "responsive ui library"
+  ],
+  "author": "Nezanuha",
+  "license": "MIT",
+  "homepage": "https://frutjam.com",
+  "bugs": {
+    "url": "https://github.com/nezanuha/frutjam/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.2.4",
+    "autoprefixer": "^10.5.0",
+    "cssnano": "^8.0.0",
+    "postcss": "^8.5.14",
+    "postcss-js": "^5.1.0",
+    "rimraf": "^6.1.3",
+    "tailwindcss": "^4.2.4"
+  }
+}

package/packages/js/carousel.js

@@ -6,7 +6,8 @@ export function createCarousel(el) {
     const items = getItems()
     if (!items.length) return
     current = Math.max(0, Math.min(index, items.length - 1))
-    items[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    items[current].scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'nearest', inline: 'start' })
   }
 
   return {

package/packages/js/collapsible.js

@@ -1,8 +1,14 @@
 export function createCollapsible(el) {
+  function syncAria() {
+    const isOpen = el.classList.contains('collapsible-open')
+    const trigger = el.querySelector('[aria-expanded]')
+    if (trigger) trigger.setAttribute('aria-expanded', String(isOpen))
+  }
+
   return {
-    open: () => el.classList.add('collapsible-open'),
-    close: () => el.classList.remove('collapsible-open'),
-    toggle: () => el.classList.toggle('collapsible-open'),
+    open: () => { el.classList.add('collapsible-open'); syncAria() },
+    close: () => { el.classList.remove('collapsible-open'); syncAria() },
+    toggle: () => { el.classList.toggle('collapsible-open'); syncAria() },
     isOpen: () => el.classList.contains('collapsible-open'),
   }
 }

package/packages/js/combobox.js

@@ -1,7 +1,23 @@
+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-option, [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-option'))
   const visibleOptions = () => allOptions().filter((o) => !o.hidden)
 
@@ -29,10 +45,16 @@ export function createCombobox(el) {
 
   function highlight(index) {
     const opts = visibleOptions()
-    opts.forEach((o) => o.classList.remove('combobox-option-active'))
+    opts.forEach((o, i) => {
+      o.classList.remove('combobox-option-active')
+      if (!o.id) o.id = `fj-combobox-option-${uid}-${i}`
+    })
     if (index >= 0 && opts[index]) {
       opts[index].classList.add('combobox-option-active')
       opts[index].scrollIntoView({ block: 'nearest' })
+      input?.setAttribute('aria-activedescendant', opts[index].id)
+    } else {
+      input?.removeAttribute('aria-activedescendant')
     }
     activeIndex = index
   }

package/packages/js/tabs.js

@@ -1,22 +1,78 @@
+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) => {
-      tab.classList.toggle('tab-active', i === index)
-      tab.setAttribute('aria-selected', String(i === index))
+      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() {

package/packages/js/toast.js

@@ -1,8 +1,16 @@
 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

package/packages/react/useCollapsible.js

@@ -2,11 +2,19 @@ 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'), []),
-    close: useCallback(() => ref.current?.classList.remove('collapsible-open'), []),
-    toggle: useCallback(() => ref.current?.classList.toggle('collapsible-open'), []),
+    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

@@ -1,6 +1,9 @@
-import { useState, useCallback } from 'react'
+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)
@@ -12,6 +15,8 @@ export function useCombobox({ items = [], filterFn } = {}) {
         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)
@@ -53,11 +58,18 @@ export function useCombobox({ items = [], filterFn } = {}) {
       onKeyDown: handleKeyDown,
       onFocus: () => setOpen(true),
       onBlur: () => setTimeout(() => setOpen(false), 150),
+      role: 'combobox',
       'aria-expanded': open,
       'aria-autocomplete': 'list',
-      role: 'combobox',
+      '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,

package/packages/react/useTabs.js

@@ -1,23 +1,53 @@
-import { useState, useCallback } from 'react'
+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,
-    tabProps: (index) => ({
+    tablistProps: {
+      role: 'tablist',
+    },
+    tabProps: (index, count = 0) => ({
+      id: tabId(index),
       className: active === index ? 'tab tab-active' : 'tab',
       onClick: () => activate(index),
-      'aria-selected': active === 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,
     }),
   }
 }