monochrome 0.0.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Colin van Eenige
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,179 @@
+# monochrome
+
+Accessible UI component library. Best-in-class performance. HTML-first, React supported.
+
+<!-- badges -->
+![gzip](https://img.shields.io/badge/gzip-2.2kB-brightgreen) ![tests](https://img.shields.io/badge/tests-350_passing-brightgreen) ![WCAG](https://img.shields.io/badge/WCAG_2.2-AA-blue) ![license](https://img.shields.io/badge/license-MIT-blue)
+<!-- /badges -->
+
+## Install
+
+```bash
+npm install monochrome
+```
+
+## How it works
+
+monochrome uses the DOM as its source of truth. Instead of managing state in JavaScript, it reads ARIA attributes, responds to user interactions, and updates them directly. Minimal global event listeners handle every component on the page through event delegation. No initialization, no configuration, no framework required.
+
+Write semantic HTML, load the script, and everything becomes interactive.
+
+## Usage
+
+### React
+
+```tsx
+import "monochrome"
+import { Accordion } from "monochrome/react"
+
+export function FAQ() {
+  return (
+    <Accordion.Root type="single">
+      <Accordion.Item>
+        <Accordion.Header>
+          <Accordion.Trigger>What is monochrome?</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Panel>
+          <p>A tiny, accessible UI component library.</p>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+}
+```
+
+Import `"monochrome"` once at your app's entry point. The React wrappers generate the correct HTML structure and ARIA attributes. All interactivity comes from the monochrome runtime. No React needed on the client.
+
+### HTML
+
+monochrome works with any framework or no framework at all. Write semantic HTML with the ID convention and everything just works:
+
+```html
+<script src="https://unpkg.com/monochrome"></script>
+
+<button
+  id="mct:collapsible:demo"
+  aria-expanded="false"
+  aria-controls="mcc:collapsible:demo"
+>
+  Toggle
+</button>
+<div id="mcc:collapsible:demo" aria-hidden="true" hidden="until-found">
+  Content appears here.
+</div>
+```
+
+
+### React Components
+
+<details>
+<summary>Collapsible</summary>
+
+```tsx
+import { Collapsible } from "monochrome/react"
+
+<Collapsible.Root open>
+  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+  <Collapsible.Panel>Content here</Collapsible.Panel>
+</Collapsible.Root>
+```
+</details>
+
+<details>
+<summary>Tabs</summary>
+
+```tsx
+import { Tabs } from "monochrome/react"
+
+<Tabs.Root defaultValue="tab1" orientation="horizontal">
+  <Tabs.List>
+    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
+  <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
+</Tabs.Root>
+```
+</details>
+
+<details>
+<summary>Menu</summary>
+
+```tsx
+import { Menu } from "monochrome/react"
+
+<Menu.Root>
+  <Menu.Trigger>Open Menu</Menu.Trigger>
+  <Menu.Popover>
+    <Menu.Item>Action 1</Menu.Item>
+    <Menu.Item disabled>Disabled</Menu.Item>
+    <Menu.Separator />
+    <Menu.CheckboxItem checked={false}>Bold</Menu.CheckboxItem>
+    <Menu.RadioItem checked>Small</Menu.RadioItem>
+    <Menu.RadioItem checked={false}>Large</Menu.RadioItem>
+  </Menu.Popover>
+</Menu.Root>
+```
+</details>
+
+## Components
+
+Four interactive UI patterns in <!-- size -->2.2kB<!-- /size -->:
+
+| Component | Description | Tests |
+| --- | --- | ---: |
+| **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->65<!-- /tests:accordion --> |
+| **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->41<!-- /tests:collapsible --> |
+| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->175<!-- /tests:menu --> |
+| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->69<!-- /tests:tabs --> |
+
+## Accessibility
+
+Every component follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) and targets WCAG 2.2 AA:
+
+- Full keyboard navigation (Arrow keys, Home, End, Enter, Space, Escape)
+- Roving tabindex for focus management
+- Automatic ARIA attribute management
+- Preserves browser find-in-page (cmd+f)
+- Screen reader support out of the box
+
+## Performance
+
+- Event delegation: minimal global listeners shared across all components
+- No per-component instances, state objects, or memory allocations
+- Zero DOM queries, navigates through direct element pointers
+- Adding more components to the page costs nothing at runtime
+
+> Performance isn't a feature, it's a consequence of the architecture. When you don't have per-component state, per-component listeners, or a rendering framework, there's nothing left to be slow.
+
+## Styling
+
+monochrome is headless — no CSS is shipped. You provide all styles. Key requirements for menus:
+
+```css
+/* Menu popover visibility */
+[popover]:popover-open {
+  display: flex;
+}
+
+/* Menu positioning (core sets --top, --right, --bottom, --left from getBoundingClientRect) */
+[role="menu"] {
+  position: fixed;
+  top: var(--bottom);
+  left: var(--left);
+}
+
+/* Submenu positioning */
+[role="menu"] [role="menu"] {
+  top: var(--top);
+  left: var(--right);
+}
+```
+
+## Browser Requirements
+
+The core depends on [Popover API](https://caniuse.com/mdn-api_htmlelement_showpopover) and [`hidden="until-found"`](https://caniuse.com/mdn-html_global_attributes_hidden_until-found_value) (Baseline 2024). All modern browsers are supported.
+
+## License
+
+MIT &copy; Colin van Eenige

package/dist/index.js

@@ -0,0 +1 @@
+if(typeof document<"u"){let E=null,C=null,M=null,w=null,k=[],l=[],f=null,o=null,h=null,y=0,d=(e)=>e instanceof HTMLElement,u=(e,n)=>e instanceof HTMLButtonElement&&(!n||e.id.startsWith(n)),A=(e)=>d(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",b=(e)=>document.getElementById(e.getAttribute("aria-controls")||""),L=(e,n)=>{while(e){if(e.id.startsWith(n))return e;e=e.parentElement}return null},P=(e)=>{let n=(i)=>i?e(i.nextElementSibling||i.parentElement?.firstElementChild,n):null,t=(i)=>i?e(i.previousElementSibling||i.parentElement?.lastElementChild,t):null;return[n,t]},p=(e,n)=>{if(d(e)){let t=e.firstElementChild;if(M){if(d(t)){if(t===M){for(let i of k)i.ariaChecked="false";return t}if(t.role==="menuitemradio"){if(!w)t.ariaChecked="false";else k.push(t);return n(e)}}return w=!0,k=[],n(e)}if(A(t)&&(!C||t.textContent?.toLowerCase().startsWith(C)))return t.focus(),E=!0,t;else if(f!==e){if(!f)f=e;return n(e)}else f=null}return null},H=(e,n)=>{if(d(e)){if(f===e)return null;if(!f)f=e;let t=e.firstElementChild?.firstElementChild;if(u(t,"mct:a")){if(t.ariaDisabled==="true")return n(e);return E=!0,t.focus(),t}}return n(e)},v=(e,n)=>{if(u(e,"mct:t")){if(f===e)return null;if(!f)f=e;if(e.ariaDisabled==="true")return n(e);return E=!0,e.focus(),e}else return n(e)},[g,T]=P(p),[D,W]=P(H),[R,F]=P(v),x=(e)=>{let n=b(e);if(n){let t=e.ariaExpanded!=="true";e.ariaExpanded=t?"true":"false",n.ariaHidden=t?"false":"true",t?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found")}},$=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")x(e);else{let n=L(e,"mcr:a");if(!n||n.getAttribute("data-mode")!=="single")x(e);else{let t=n.firstElementChild;while(t){let i=t.firstElementChild?.firstElementChild;if(d(i)&&(i===e||i.ariaExpanded==="true"))x(i);t=t.nextElementSibling}}}},S=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let n=e.parentElement?.firstElementChild;while(d(n)){if(n===e||n.ariaSelected==="true"){let t=b(n);if(t){let i=n.ariaSelected!=="true";if(n.ariaSelected=i?"true":"false",n.tabIndex=i?0:-1,t.ariaHidden=i?"false":"true",t.hasAttribute("tabindex"))t.tabIndex=i?0:-1;i?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found")}}n=n.nextElementSibling}}},c=(e,n=0)=>{if(e?.id.startsWith("mct:m")){let t=b(e);if(t)if(e.ariaExpanded==="true"){if(o)o.removeAttribute("data-safe");if(o=null,n!==3)e.focus();t.hidePopover(),e.ariaExpanded="false",t.ariaHidden="true"}else{l.push(e),t.showPopover(),e.ariaExpanded="true",t.ariaHidden="false";let i=e.getBoundingClientRect();t.style.setProperty("--top",`${i.top}px`),t.style.setProperty("--right",`${i.right}px`),t.style.setProperty("--bottom",`${i.bottom}px`),t.style.setProperty("--left",`${i.left}px`);let a=e.parentElement;if(a){let r=t.getBoundingClientRect(),s=r.left>i.right,N=s?r.left:r.right;o=a,h=i,y=s?-4:4,a.style.setProperty("--right",`${N}px`),a.style.setProperty("--top",`${r.top}px`),a.style.setProperty("--bottom",`${r.bottom}px`)}if(n===0)e.focus();else if(n===1)p(t.firstElementChild,g);else if(n===2)p(t.lastElementChild,T)}}},m=(e=0)=>{while(l[e])c(l.pop(),3)},B=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")M=e,w=null,k=[],g(e.parentElement),M=null,e.ariaChecked="true";else m()};addEventListener("click",(e)=>{E=null;let n=e.detail===0,t=d(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(t){let i=t;while(i){let a=i.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){let r=n?1:3;if(L(i.parentElement,"mcc:m")){if(!l.includes(i))c(i,r)}else if(l[0]){let N=i!==l[0];if(m(),N)c(i,r)}else c(i,r)}else{if(l[0])m();if(a.startsWith("mct:a"))$(i);else if(a.startsWith("mct:c"))x(i);else if(a.startsWith("mct:t"))S(i)}break}else if(a.startsWith("mcc:m")&&l[0]){let r=t;while(r&&r!==i){if(A(r)&&!u(r,"mct:m")){B(r);break}r=r.parentElement}break}i=i.parentElement}if(!i&&l[0])m()}if(E)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(l[0]){if(l[1]&&o&&h){if(e.clientX>=h.left&&e.clientX<=h.right&&e.clientY>=h.top&&e.clientY<=h.bottom){if(o.style.setProperty("--left",`${e.clientX+y}px`),o.style.setProperty("--center",`${e.clientY}px`),!o.hasAttribute("data-safe"))o.setAttribute("data-safe","")}else if(o.hasAttribute("data-safe")&&(e.target!==o||y*e.movementX>0))o.removeAttribute("data-safe")}let n=e.target;if(d(n)){let t=[],i=n,a=!1,r=!1;while(i){if(A(i))r=!0;if(!r&&i.id.startsWith("mcc:")){a=!0;break}let s=i.firstElementChild;if(u(s,"mct:m"))t.unshift(s);i=i.parentElement}if(!a&&t[0]){let s=0;while(l[s]&&l[s]===t[s])s++;if(s===0&&t[0].role!=="menuitem")return;m(s),c(t[s],3)}}}}),addEventListener("keydown",(e)=>{E=null,C=null,f=null;let n=e.target;if(u(n,"mct:a")){let t=n.parentElement?.parentElement;if(t)switch(e.key){case"ArrowDown":D(t);break;case"ArrowUp":W(t);break;case"Home":{let i=t.parentElement;if(i)H(i.firstElementChild,D);break}case"End":{let i=t.parentElement;if(i)H(i.lastElementChild,W);break}}}else if(u(n,"mct:t")){let t=n.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(t)R(n);break;case"ArrowUp":if(t)F(n);break;case"ArrowRight":if(!t)R(n);break;case"ArrowLeft":if(!t)F(n);break;case"Home":v(n.parentElement?.firstElementChild,R);break;case"End":v(n.parentElement?.lastElementChild,F);break}}else{if(u(n,"mct:m")){let t=L(n,"mcc:m")===null;switch(e.key){case"ArrowDown":if(t)if(n.ariaExpanded!=="true")c(n,1);else{let i=b(n);if(i)p(i.firstElementChild,g)}break;case"ArrowUp":if(t)if(n.ariaExpanded!=="true")c(n,2);else{let i=b(n);if(i)p(i.lastElementChild,T)}break;case"ArrowRight":if(!t)c(n,1);break}}if(!E&&d(n)&&n.role?.startsWith("menuitem")&&n.parentElement){let t=n.parentElement,i=l[0]?.parentElement||t,a=L(n.parentElement,"mcc:m");switch(e.key){case"Tab":if(l[0])l[0].focus();m();break;case"ArrowDown":if(a)g(t);break;case"ArrowUp":if(a)T(t);break;case"ArrowRight":{let r=g(i);if(r){let s=l[0];if(m(),s&&u(r,"mct:m"))c(r,3)}break}case"ArrowLeft":if(l[1])c(l.pop(),0);else{let r=T(i);if(r){let s=l[0];if(m(),s&&u(r,"mct:m"))c(r,3)}}break;case"Home":p(t.parentElement?.firstElementChild,g);break;case"End":p(t.parentElement?.lastElementChild,T);break;default:if(/^[a-zA-Z]$/.test(e.key))C=e.key.toLowerCase(),g(t);break}}}if(e.key==="Escape"&&l[0])c(l.pop(),0);if(E)e.preventDefault()}),addEventListener("scroll",(e)=>{if(l[0]&&(!d(e.target)||!e.target.id.startsWith("mcc:m")))m()},!0),addEventListener("resize",()=>{if(l[0])m()}),addEventListener("beforematch",(e)=>{if(d(e.target)){let n=e.target;while(n){let t=n.getAttribute("aria-labelledby");if(t){let i=document.getElementById(t);if(u(i,"mct:a")){if(i.ariaExpanded!=="true")$(i)}else if(u(i,"mct:c")){if(i.ariaExpanded!=="true")x(i)}else if(u(i,"mct:t"))S(i)}n=n.parentElement}}})}

package/dist/react/index.js

@@ -0,0 +1,2 @@
+"use client";
+import{createContext as Y,useContext as Z,useId as N}from"react";import{jsx as X}from"react/jsx-runtime";var m=(a,t)=>t?`${a}:${t}`:a,i=()=>X("script",{dangerouslySetInnerHTML:{__html:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}});import{jsx as w,jsxs as A}from"react/jsx-runtime";var E=Y(null);function _(){let a=Z(E);if(!a)throw Error("Accordion components must be used within Accordion.Item");return a}function G({children:a,type:t,...b}){let f=N();return w("div",{...b,"data-mode":t??"single",id:`mcr:accordion:${f}`,children:a})}function F({children:a,open:t,disabled:b,...f}){let v=N();return w(E.Provider,{value:{baseId:v,open:t??!1,disabled:b??!1},children:w("div",{...f,children:a})})}function W({children:a,as:t,...b}){return w(t??"h3",{...b,children:a})}function R({children:a,...t}){let b=_(),f=b.baseId,v=b.open;return w("button",{...t,type:"button",id:`mct:accordion:${f}`,"aria-expanded":v,"aria-controls":`mcc:accordion:${f}`,"aria-disabled":b.disabled||void 0,children:a})}function M({children:a,...t}){let b=_(),f=b.baseId,v=b.open;return A("div",{...t,id:`mcc:accordion:${f}`,role:"region","aria-labelledby":`mct:accordion:${f}`,"aria-hidden":!v,hidden:v?void 0:!0,children:[!v&&w(i,{}),a]})}var k={Root:G,Item:F,Header:W,Trigger:R,Panel:M};import{createContext as O,useContext as n,useId as I}from"react";import{jsx as g,jsxs as r}from"react/jsx-runtime";var D=O(null);function P(){let a=n(D);if(!a)throw Error("Collapsible components must be used within Collapsible.Root");return a}function o({children:a,open:t,...b}){let f=I();return g(D.Provider,{value:{baseId:f,open:t??!1},children:g("div",{...b,children:a})})}function l({children:a,...t}){let b=P(),f=b.baseId,v=b.open;return g("button",{...t,type:"button",id:`mct:collapsible:${f}`,"aria-expanded":v,"aria-controls":`mcc:collapsible:${f}`,children:a})}function C({children:a,...t}){let b=P(),f=b.baseId,v=b.open;return r("div",{...t,id:`mcc:collapsible:${f}`,"aria-labelledby":`mct:collapsible:${f}`,"aria-hidden":!v,hidden:v?void 0:!0,children:[!v&&g(i,{}),a]})}var d={Root:o,Trigger:l,Panel:C};import{createContext as q,useContext as J,useId as K,useRef as h}from"react";import{jsx as u}from"react/jsx-runtime";var H=q(null),Q=q(null);function L(){let a=J(H);if(!a)throw Error("Menu components must be used within Menu.Root");return a}function j(){let a=J(Q);if(!a)throw Error("Menu components must be used within Menu.Popover");return a}function c({children:a,menubar:t,...b}){let f=K();return u(H.Provider,{value:{id:f,root:!0,menubar:t},children:u("div",{...b,id:`mcr:menu:${f}`,children:a})})}function s({children:a,...t}){let b=L();return u("button",{...t,type:"button",id:`mct:menu:${b.id}`,"aria-controls":`mcc:menu:${b.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabIndex:b.root||b.first?0:-1,role:b.submenu?"menuitem":"button",children:a})}function e({children:a,...t}){let b=L(),f=h(!1);f.current=!1;let v=u(Q.Provider,{value:{claimFirst:()=>{if(!f.current)return f.current=!0,!0;return!1}},children:a});return b.menubar?u("ul",{...t,role:"menubar",children:v}):u("ul",{...t,role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual",children:v})}function x({children:a,disabled:t,href:b,...f}){return u("li",{role:"none",children:t?u("span",{...f,role:"menuitem","aria-disabled":"true",tabIndex:-1,children:a}):b?u("a",{...f,role:"menuitem",href:b,tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitem",tabIndex:-1,children:a})})}function p({children:a,checked:t,disabled:b,...f}){return u("li",{role:"none",children:b?u("span",{...f,role:"menuitemcheckbox","aria-checked":t??!1,"aria-disabled":"true",tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitemcheckbox","aria-checked":t??!1,tabIndex:-1,children:a})})}function aa({children:a,checked:t,disabled:b,...f}){return u("li",{role:"none",children:b?u("span",{...f,role:"menuitemradio","aria-checked":t??!1,"aria-disabled":"true",tabIndex:-1,children:a}):u("button",{...f,type:"button",role:"menuitemradio","aria-checked":t??!1,tabIndex:-1,children:a})})}function ta({children:a,...t}){return u("li",{...t,role:"presentation",children:a})}function ba(a){return u("li",{...a,role:"separator"})}function fa({children:a,...t}){let b=L(),v=j().claimFirst(),T=K(),y=v&&b.menubar&&!b.submenu;return u(H.Provider,{value:{id:T,submenu:!0,first:y},children:u("li",{...t,role:"none",children:a})})}var va={Root:c,Trigger:s,Popover:e,Item:x,CheckboxItem:p,RadioItem:aa,Label:ta,Separator:ba,Group:fa};import{createContext as ua,isValidElement as Ta,useContext as ya,useId as $a}from"react";import{jsx as V,jsxs as ma}from"react/jsx-runtime";var U=ua(null);function z(){let a=ya(U);if(!a)throw Error("Tabs components must be used within Tabs.Root");return a}function S(a){if(!a||typeof a!=="object")return;if(Ta(a)){let t=a.props;if(t.value!==void 0)return t.value;return S(t.children)}if(Array.isArray(a))for(let t of a){let b=S(t);if(b!==void 0)return b}}function ia({children:a,defaultValue:t,orientation:b,...f}){let v=$a(),T=b??"horizontal";return V(U.Provider,{value:{baseId:v,selected:t??S(a),orientation:T},children:V("div",{...f,"data-orientation":T,id:`mcr:tabs:${v}`,children:a})})}function wa({children:a,...t}){let b=z();return V("div",{...t,role:"tablist","aria-orientation":b.orientation,children:a})}function Ba({children:a,value:t,id:b,selected:f,disabled:v,...T}){let y=z(),B=m(y.baseId,b??t),$=f??t===y.selected;return V("button",{...T,type:"button",role:"tab",id:`mct:tabs:${B}`,"aria-selected":$,"aria-controls":`mcc:tabs:${B}`,tabIndex:$?0:-1,"aria-disabled":v||void 0,children:a})}function Va({children:a,value:t,id:b,selected:f,focusable:v=!0,...T}){let y=z(),B=m(y.baseId,b??t),$=f??t===y.selected;return ma("div",{...T,role:"tabpanel",id:`mcc:tabs:${B}`,"aria-labelledby":`mct:tabs:${B}`,"aria-hidden":!$,hidden:$?void 0:!0,tabIndex:v?$?0:-1:void 0,"data-orientation":y.orientation,children:[!$&&V(i,{}),a]})}var ga={Root:ia,List:wa,Tab:Ba,Panel:Va};export{ga as Tabs,va as Menu,d as Collapsible,k as Accordion};

package/package.json

@@ -1,11 +1,101 @@
 {
   "name": "monochrome",
-  "version": "0.0.0",
-  "main": "index.js",
+  "version": "0.2.0",
+  "description": "Accessible UI component library. Best-in-class performance. HTML-first, React supported.",
+  "author": "Colin van Eenige",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vaneenige/monochrome-ui.git"
+  },
+  "homepage": "https://github.com/vaneenige/monochrome-ui#readme",
+  "bugs": "https://github.com/vaneenige/monochrome-ui/issues",
+  "keywords": [
+    "accessible",
+    "a11y",
+    "aria",
+    "wai-aria",
+    "ui",
+    "component",
+    "components",
+    "component-library",
+    "library",
+    "headless",
+    "unstyled",
+    "lightweight",
+    "keyboard-navigation",
+    "html",
+    "react",
+    "typescript",
+    "accordion",
+    "collapsible",
+    "menu",
+    "tabs"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/index.js",
+    "./src/index.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src": "./src/index.ts",
+    "./react": {
+      "types": "./src/react/index.ts",
+      "default": "./dist/react/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./src/react/index.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "NODE_ENV=production bun build.ts",
+    "test": "playwright test",
+    "lint": "biome check src tests",
+    "lint:fix": "biome check --write src tests",
+    "format": "biome format --write src tests",
+    "prepublishOnly": "bun run build && bun run test"
   },
-  "author": "",
-  "license": "MIT",
-  "description": ""
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.4",
+    "@playwright/test": "1.58.2",
+    "@types/bun": "1.3.9",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "versionMeta": {
+    "gzipSize": 2219,
+    "tests": {
+      "total": 350,
+      "collapsible": 41,
+      "accordion": 65,
+      "menu": 175,
+      "tabs": 69
+    }
+  }
 }