monochrome 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/index.d.ts +5 -1
- package/dist/index.js +1 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.js +1 -1
- package/dist/react/popover.d.ts +11 -0
- package/dist/react/tooltip.d.ts +11 -0
- package/dist/vue/index.d.ts +2 -0
- package/dist/vue/index.js +1 -1
- package/dist/vue/popover.d.ts +11 -0
- package/dist/vue/shared.d.ts +8 -0
- package/dist/vue/tooltip.d.ts +11 -0
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.
|
|
4
4
|
|
|
5
5
|
<!-- badges -->
|
|
6
|
-
   
|
|
7
7
|
<!-- /badges -->
|
|
8
8
|
|
|
9
9
|
## Install
|
|
@@ -50,14 +50,16 @@ The Vue API is identical: `import { Accordion } from "monochrome/vue"`. Monochro
|
|
|
50
50
|
|
|
51
51
|
## Components
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
Six interactive UI patterns in <!-- size -->2.6kB<!-- /size -->:
|
|
54
54
|
|
|
55
55
|
| Component | Description | Tests |
|
|
56
56
|
| --- | --- | ---: |
|
|
57
57
|
| **Accordion** | Grouped collapsible content sections | <!-- tests:accordion -->66<!-- /tests:accordion --> |
|
|
58
58
|
| **Collapsible** | Show and hide content with a button | <!-- tests:collapsible -->42<!-- /tests:collapsible --> |
|
|
59
|
-
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->
|
|
59
|
+
| **Menu** | Dropdown menus, menubars, and submenus | <!-- tests:menu -->179<!-- /tests:menu --> |
|
|
60
|
+
| **Popover** | Floating panels anchored to a trigger | <!-- tests:popover -->29<!-- /tests:popover --> |
|
|
60
61
|
| **Tabs** | Switch between multiple content panels | <!-- tests:tabs -->70<!-- /tests:tabs --> |
|
|
62
|
+
| **Tooltip** | Non-interactive description on hover or focus | <!-- tests:tooltip -->24<!-- /tests:tooltip --> |
|
|
61
63
|
|
|
62
64
|
## How it works
|
|
63
65
|
|
package/dist/index.d.ts
CHANGED
|
@@ -9,8 +9,12 @@ declare enum Prefix {
|
|
|
9
9
|
TriggerAccordion = "mct:a",
|
|
10
10
|
TriggerCollapsible = "mct:c",
|
|
11
11
|
TriggerMenu = "mct:m",
|
|
12
|
-
|
|
12
|
+
TriggerPopover = "mct:p",
|
|
13
|
+
TriggerTabs = "mct:ta",
|
|
14
|
+
TriggerTooltip = "mct:to",
|
|
13
15
|
Content = "mcc:",
|
|
14
16
|
ContentMenu = "mcc:m",
|
|
17
|
+
ContentPopover = "mcc:p",
|
|
18
|
+
ContentTooltip = "mcc:to",
|
|
15
19
|
RootAccordion = "mcr:a"
|
|
16
20
|
}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
if(typeof document<"u"){let
|
|
1
|
+
if(typeof document<"u"){let b=null,A=null,R=null,N=null,F=[],r=[],m=null,s=null,C=null,W=null,h=null,o=null,y=null,p=null,E=null,P=null,f=(e)=>e instanceof HTMLElement,c=(e,t)=>e instanceof HTMLButtonElement&&(!t||e.id.startsWith(t)),D=(e)=>f(e)&&e.role?.startsWith("menuitem")===!0&&e.ariaDisabled!=="true",T=(e,t)=>{let n=e.getAttribute(t);if(n)return document.getElementById(n)},L=(e,t)=>{while(e){if(e.id.startsWith(t))return e;e=e.parentElement}return null},$=(e,t)=>{let n=e.getBoundingClientRect();return t.style.setProperty("--top",`${n.top}px`),t.style.setProperty("--right",`${n.right}px`),t.style.setProperty("--bottom",`${n.bottom}px`),t.style.setProperty("--left",`${n.left}px`),t.style.setProperty("--pw",`${t.offsetWidth}px`),t.style.setProperty("--ph",`${t.offsetHeight}px`),n},S=(e)=>{let t=(i)=>i?e(i.nextElementSibling||i.parentElement?.firstElementChild,t):null,n=(i)=>i?e(i.previousElementSibling||i.parentElement?.lastElementChild,n):null;return[t,n]},H=(e,t)=>{if(f(e)){let n=e.firstElementChild;if(R){if(f(n)){if(n===R){for(let i of F)i.ariaChecked="false";return n}if(n.role==="menuitemradio"){if(!N)n.ariaChecked="false";else F.push(n);return t(e)}}return N=!0,F=[],t(e)}if(D(n)&&(!A||n.textContent?.toLowerCase().startsWith(A)))return n.focus(),b=!0,n;else if(m!==e){if(!m)m=e;return t(e)}else m=null}return null},B=(e,t)=>{if(f(e)){if(m===e)return null;if(!m)m=e;let n=e.firstElementChild?.firstElementChild;if(c(n,"mct:a")){if(n.ariaDisabled==="true")return t(e);return b=!0,n.focus(),n}}return t(e)},I=(e,t)=>{if(c(e,"mct:ta")){if(m===e)return null;if(!m)m=e;if(e.ariaDisabled==="true")return t(e);return b=!0,e.focus(),e}else return t(e)},[k,v]=S(H),[X,Y]=S(B),[O,U]=S(I),w=(e)=>{let t=T(e,"aria-controls");if(t){let n=e.ariaExpanded!=="true";e.ariaExpanded=n?"true":"false",t.ariaHidden=n?"false":"true",n?t.removeAttribute("hidden"):t.setAttribute("hidden","until-found")}},z=(e)=>{if(e.ariaDisabled==="true")return;if(e.ariaExpanded==="true")w(e);else{let t=L(e,"mcr:a");if(!t||t.getAttribute("data-mode")!=="single")w(e);else{let n=t.firstElementChild;while(n){let i=n.firstElementChild?.firstElementChild;if(f(i)&&(i===e||i.ariaExpanded==="true"))w(i);n=n.nextElementSibling}}}},G=(e)=>{if(e.ariaDisabled!=="true"&&e.ariaSelected!=="true"){let t=e.parentElement?.firstElementChild;while(f(t)){if(t===e||t.ariaSelected==="true"){let n=T(t,"aria-controls");if(n){let i=t.ariaSelected!=="true";if(t.ariaSelected=i?"true":"false",t.tabIndex=i?0:-1,n.ariaHidden=i?"false":"true",n.hasAttribute("tabindex"))n.tabIndex=i?0:-1;i?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found")}}t=t.nextElementSibling}}},d=(e,t=0)=>{if(e?.id.startsWith("mct:m")){let n=T(e,"aria-controls");if(n)if(e.ariaExpanded==="true"){if(s)s.removeAttribute("data-safe");if(s=null,W=null,h=null,t!==3)e.focus();n.hidePopover(),e.ariaExpanded="false",n.ariaHidden="true"}else{r.push(e),n.showPopover(),e.ariaExpanded="true",n.ariaHidden="false";let i=$(e,n),a=e.parentElement;if(a)s=a,C=i,W=n,h=null;if(t===0)e.focus();else if(t===1)H(n.firstElementChild,k);else if(t===2)H(n.lastElementChild,v)}}},g=(e=0)=>{while(r[e])d(r.pop(),3)},Z=(e)=>{if(e.role==="menuitemcheckbox")e.ariaChecked=e.ariaChecked==="true"?"false":"true";else if(e.role==="menuitemradio")R=e,N=null,F=[],k(e.parentElement),R=null,e.ariaChecked="true";else g()},x=(e,t)=>{if(e.ariaExpanded==="true"===t)return;let n=T(e,"aria-controls");if(n){if(t){if(o&&o!==e)x(o,!1);n.showPopover(),e.ariaExpanded="true",n.ariaHidden="false",$(e,n),o=e}else if(n.hidePopover(),e.ariaExpanded="false",n.ariaHidden="true",o===e)o=null}},K=(e,t)=>{let n=T(e,"aria-describedby");if(n)if(t)n.showPopover(),$(e,n);else n.hidePopover()},M=()=>{if(P&&P!==y&&P!==p)P=null;let e=y??p,t=e&&e!==P?e:null;if(t!==E){if(E)K(E,!1);if(t)K(t,!0);E=t}};addEventListener("click",(e)=>{b=null;let t=e.detail===0,n=f(e.target)?e.target:e.target instanceof Element?e.target.parentElement:null;if(n){let i=n;while(i){let a=i.id;if(a.startsWith("mct:")){if(a.startsWith("mct:m")){if(o)x(o,!1);let l=t?1:3;if(L(i.parentElement,"mcc:m")){if(!r.includes(i))d(i,l)}else if(r[0]){let j=i!==r[0];if(g(),j)d(i,l)}else d(i,l)}else{if(r[0])g();if(a.startsWith("mct:a"))z(i);else if(a.startsWith("mct:c"))w(i);else if(a.startsWith("mct:ta"))G(i);else if(a.startsWith("mct:p")&&i.ariaDisabled!=="true"){let l=i.ariaExpanded==="true";x(i,!l),l?i.focus():T(i,"aria-controls")?.focus()}else if(a.startsWith("mct:to")&&E)P=E,M()}break}else if(a.startsWith("mcc:m")&&r[0]){let l=n;while(l&&l!==i){if(D(l)&&!c(l,"mct:m")){Z(l);break}l=l.parentElement}break}else if(a.startsWith("mcc:p"))break;else if(a.startsWith("mcc:to"))break;i=i.parentElement}if(!i){if(r[0])g();if(o)x(o,!1)}}if(b)e.preventDefault()}),addEventListener("pointermove",(e)=>{if(e.pointerType==="touch")return;if(f(e.target)&&!L(e.target,"mcc:to")){let t=L(e.target,"mct:to");if(t!==y)y=t,M()}if(r[0]){if(r[1]&&s&&C&&W){if(e.clientX>=C.left&&e.clientX<=C.right&&e.clientY>=C.top&&e.clientY<=C.bottom){if(h=W.getBoundingClientRect(),s.style.setProperty("--left",`${h.left}px`),s.style.setProperty("--right",`${h.right}px`),s.style.setProperty("--top",`${h.top}px`),s.style.setProperty("--bottom",`${h.bottom}px`),s.style.setProperty("--x",`${e.clientX}px`),s.style.setProperty("--y",`${e.clientY}px`),!s.hasAttribute("data-safe"))s.setAttribute("data-safe","")}else if(s.hasAttribute("data-safe")&&h&&(e.target!==s||(h.left-C.right)*e.movementX<0))s.removeAttribute("data-safe")}let t=e.target;if(f(t)){let n=[],i=t,a=!1,l=!1;while(i){if(D(i))l=!0;if(!l&&i.id.startsWith("mcc:")){a=!0;break}let u=i.firstElementChild;if(c(u,"mct:m"))n.unshift(u);i=i.parentElement}if(!a&&n[0]){let u=0;while(r[u]&&r[u]===n[u])u++;if(u===0&&(n[0].role!=="menuitem"||n[0].parentElement?.parentElement!==r[0].parentElement?.parentElement))return;g(u),d(n[u],3)}}}}),addEventListener("keydown",(e)=>{b=null,A=null,m=null;let t=e.target;if(c(t,"mct:a")){let n=t.parentElement?.parentElement;if(n)switch(e.key){case"ArrowDown":X(n);break;case"ArrowUp":Y(n);break;case"Home":{let i=n.parentElement;if(i)B(i.firstElementChild,X);break}case"End":{let i=n.parentElement;if(i)B(i.lastElementChild,Y);break}}}else if(c(t,"mct:ta")){let n=t.parentElement?.ariaOrientation==="vertical";switch(e.key){case"ArrowDown":if(n)O(t);break;case"ArrowUp":if(n)U(t);break;case"ArrowRight":if(!n)O(t);break;case"ArrowLeft":if(!n)U(t);break;case"Home":I(t.parentElement?.firstElementChild,O);break;case"End":I(t.parentElement?.lastElementChild,U);break}}else{if(c(t,"mct:m")){let n=L(t,"mcc:m")===null;switch(e.key){case"ArrowDown":if(n)if(t.ariaExpanded!=="true")d(t,1);else{let i=T(t,"aria-controls");if(i)H(i.firstElementChild,k)}break;case"ArrowUp":if(n)if(t.ariaExpanded!=="true")d(t,2);else{let i=T(t,"aria-controls");if(i)H(i.lastElementChild,v)}break;case"ArrowRight":if(!n)d(t,1);break}}if(!b&&f(t)&&t.role?.startsWith("menuitem")&&t.parentElement){let n=t.parentElement,i=r[0]?.parentElement||n,a=L(t.parentElement,"mcc:m");switch(e.key){case"Tab":if(r[0])r[0].focus();g();break;case"ArrowDown":if(a)k(n);break;case"ArrowUp":if(a)v(n);break;case"ArrowRight":{let l=k(i);if(l){let u=r[0];if(g(),u&&c(l,"mct:m"))d(l,3)}break}case"ArrowLeft":if(r[1])d(r.pop(),0);else{let l=v(i);if(l){let u=r[0];if(g(),u&&c(l,"mct:m"))d(l,3)}}break;case"Home":H(n.parentElement?.firstElementChild,k);break;case"End":H(n.parentElement?.lastElementChild,v);break;default:if(/^[a-zA-Z]$/.test(e.key))A=e.key.toLowerCase(),k(n);break}}}if(e.key==="Escape"){if(r[0])d(r.pop(),0);if(o){let n=o;x(n,!1),n.focus()}if(E)P=E,M()}if(b)e.preventDefault()}),addEventListener("scroll",(e)=>{if(r[0]&&(!f(e.target)||!e.target.id.startsWith("mcc:m")))g();if(o&&!(f(e.target)&&L(e.target,"mcc:p")))x(o,!1);if(E)y=null,p=null,M()},!0),addEventListener("resize",()=>{if(r[0])g();if(o)x(o,!1);if(E)y=null,p=null,M()}),addEventListener("focusin",(e)=>{let t=e.target;if(c(t,"mct:to")){if(p!==t)p=t,M()}else if(p)p=null,M()}),addEventListener("focusout",(e)=>{if(o&&f(e.relatedTarget)&&o!==e.relatedTarget&&!T(o,"aria-controls")?.contains(e.relatedTarget))x(o,!1);if(p&&e.target===p&&!e.relatedTarget)p=null,M()}),addEventListener("beforematch",(e)=>{if(f(e.target)){let t=e.target;while(t){let n=t.getAttribute("aria-labelledby");if(n){let i=document.getElementById(n);if(c(i,"mct:a")){if(i.ariaExpanded!=="true")z(i)}else if(c(i,"mct:c")){if(i.ariaExpanded!=="true")w(i)}else if(c(i,"mct:ta"))G(i)}t=t.parentElement}}})}
|
package/dist/react/index.d.ts
CHANGED
package/dist/react/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{createContext as
|
|
2
|
+
import{createContext as k,createElement as c,useContext as O,useId as v}from"react";import{createElement as F}from"react";var x=(e,o)=>o?`${e}:${o}`:e,u=()=>F("script",{dangerouslySetInnerHTML:{__html:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}});var R=k(null);function E(){let e=O(R);if(!e)throw Error("Accordion components must be used within Accordion.Item");return e}function j({children:e,type:o,...t}){let n=v();return c("div",{...t,"data-mode":o??"single",id:`mcr:accordion:${n}`},e)}function z({children:e,open:o,disabled:t,...n}){let r=v();return c(R.Provider,{value:{baseId:r,open:o??!1,disabled:t??!1}},c("div",n,e))}function H({children:e,as:o,...t}){return c(o??"h3",t,e)}function U({children:e,...o}){let t=E(),n=t.baseId,r=t.open;return c("button",{...o,type:"button",id:`mct:accordion:${n}`,"aria-expanded":r,"aria-controls":`mcc:accordion:${n}`,"aria-disabled":t.disabled||void 0},e)}function L({children:e,...o}){let t=E(),n=t.baseId,r=t.open;return c("div",{...o,id:`mcc:accordion:${n}`,role:"region","aria-labelledby":`mct:accordion:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},!r&&c(u,null),e)}var S={Root:j,Item:z,Header:H,Trigger:U,Panel:L};import{createContext as G,createElement as p,useContext as q,useId as J}from"react";var I=G(null);function h(){let e=q(I);if(!e)throw Error("Collapsible components must be used within Collapsible.Root");return e}function K({children:e,open:o,...t}){let n=J();return p(I.Provider,{value:{baseId:n,open:o??!1}},p("div",t,e))}function N({children:e,...o}){let t=h(),n=t.baseId,r=t.open;return p("button",{...o,type:"button",id:`mct:collapsible:${n}`,"aria-expanded":r,"aria-controls":`mcc:collapsible:${n}`},e)}function Q({children:e,...o}){let t=h(),n=t.baseId,r=t.open;return p("div",{...o,id:`mcc:collapsible:${n}`,"aria-labelledby":`mct:collapsible:${n}`,"aria-hidden":!r,hidden:r?void 0:!0},!r&&p(u,null),e)}var W={Root:K,Trigger:N,Panel:Q};import{createContext as y,createElement as a,useContext as B,useId as $,useRef as X}from"react";var f=y(null),T=y(null);function P(){let e=B(f);if(!e)throw Error("Menu components must be used within Menu.Root");return e}function Y(){let e=B(T);if(!e)throw Error("Menu components must be used within Menu.Popover");return e}function Z({children:e,menubar:o,...t}){let n=$();return a(f.Provider,{value:{id:n,root:!0,menubar:o}},a("div",{...t,id:`mcr:menu:${n}`},e))}function _({children:e,...o}){let t=P();return a("button",{...o,type:"button",id:`mct:menu:${t.id}`,"aria-controls":`mcc:menu:${t.id}`,"aria-expanded":"false","aria-haspopup":"menu",tabIndex:t.root||t.first?0:-1,role:t.submenu?"menuitem":"button"},e)}function D({children:e,...o}){let t=P(),n=X(!1);n.current=!1;let r=a(T.Provider,{value:{claimFirst:()=>{if(!n.current)return n.current=!0,!0;return!1}}},e);return t.menubar?a("ul",{...o,role:"menubar"},r):a("ul",{...o,role:"menu",id:`mcc:menu:${t.id}`,"aria-labelledby":`mct:menu:${t.id}`,"aria-hidden":"true",popover:"manual"},r)}function ee({children:e,disabled:o,href:t,...n}){let r=o?a("span",{...n,role:"menuitem","aria-disabled":"true",tabIndex:-1},e):t?a("a",{...n,role:"menuitem",href:t,tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitem",tabIndex:-1},e);return a("li",{role:"none"},r)}function te({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemcheckbox","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemcheckbox","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function oe({children:e,checked:o,disabled:t,...n}){let r=t?a("span",{...n,role:"menuitemradio","aria-checked":o??!1,"aria-disabled":"true",tabIndex:-1},e):a("button",{...n,type:"button",role:"menuitemradio","aria-checked":o??!1,tabIndex:-1},e);return a("li",{role:"none"},r)}function ne({children:e,...o}){return a("li",{...o,role:"presentation"},e)}function re(e){return a("li",{...e,role:"separator"})}function ae({children:e,...o}){let t=P(),r=Y().claimFirst(),i=$(),l=r&&t.menubar&&!t.submenu;return a(f.Provider,{value:{id:i,submenu:!0,first:l}},a("li",{...o,role:"none"},e))}var ie={Root:Z,Trigger:_,Popover:D,Item:ee,CheckboxItem:te,RadioItem:oe,Label:ne,Separator:re,Group:ae};import{createContext as le,createElement as m,useContext as se,useId as ce}from"react";var g=le(null);function w(){let e=se(g);if(!e)throw Error("Popover components must be used within Popover.Root");return e}function ue({children:e,...o}){let t=ce();return m(g.Provider,{value:{id:t}},m("div",o,e))}function de({children:e,...o}){let t=w();return m("button",{...o,type:"button",id:`mct:popover:${t.id}`,"aria-controls":`mcc:popover:${t.id}`,"aria-expanded":"false"},e)}function pe({children:e,...o}){let t=w();return m("div",{...o,id:`mcc:popover:${t.id}`,"aria-labelledby":`mct:popover:${t.id}`,"aria-hidden":"true",popover:"manual",tabIndex:-1},e)}var me={Root:ue,Trigger:de,Content:pe};import{createContext as be,createElement as d,useContext as xe,useId as fe}from"react";var M=be(null);function C(){let e=xe(M);if(!e)throw Error("Tabs components must be used within Tabs.Root");return e}function Pe({children:e,defaultValue:o,orientation:t,...n}){let r=fe(),i=t??"horizontal";return d(M.Provider,{value:{baseId:r,selected:o,orientation:i}},d("div",{...n,"data-orientation":i,id:`mcr:tabs:${r}`},e))}function Ce({children:e,...o}){let t=C();return d("div",{...o,role:"tablist","aria-orientation":t.orientation},e)}function ve({children:e,value:o,selected:t,disabled:n,...r}){let i=C(),l=x(i.baseId,o),s=t??o===i.selected;return d("button",{...r,type:"button",role:"tab",id:`mct:tabs:${l}`,"aria-selected":s,"aria-controls":`mcc:tabs:${l}`,tabIndex:s?0:-1,"aria-disabled":n||void 0},e)}function Re({children:e,value:o,selected:t,focusable:n=!0,...r}){let i=C(),l=x(i.baseId,o),s=t??o===i.selected;return d("div",{...r,role:"tabpanel",id:`mcc:tabs:${l}`,"aria-labelledby":`mct:tabs:${l}`,"aria-hidden":!s,hidden:s?void 0:!0,tabIndex:n?s?0:-1:void 0,"data-orientation":i.orientation},!s&&d(u,null),e)}var Ee={Root:Pe,List:Ce,Tab:ve,Panel:Re};import{createContext as Ie,createElement as b,useContext as he,useId as ye}from"react";var V=Ie(null);function A(){let e=he(V);if(!e)throw Error("Tooltip components must be used within Tooltip.Root");return e}function Be({children:e,...o}){let t=ye();return b(V.Provider,{value:{id:t}},b("div",o,e))}function $e({children:e,...o}){let t=A();return b("button",{...o,type:"button",id:`mct:tooltip:${t.id}`,"aria-describedby":`mcc:tooltip:${t.id}`},e)}function Te({children:e,...o}){let t=A();return b("div",{...o,id:`mcc:tooltip:${t.id}`,role:"tooltip",popover:"manual"},e)}var ge={Root:Be,Trigger:$e,Content:Te};export{ge as Tooltip,Ee as Tabs,me as Popover,ie as Menu,W as Collapsible,S as Accordion};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ReactElement } from "react";
|
|
2
|
+
import type { BaseProps } from "./shared.js";
|
|
3
|
+
declare function Root({ children, ...props }: BaseProps): ReactElement;
|
|
4
|
+
declare function Trigger({ children, ...props }: BaseProps): ReactElement;
|
|
5
|
+
declare function Content({ children, ...props }: BaseProps): ReactElement;
|
|
6
|
+
export declare const Popover: {
|
|
7
|
+
Root: typeof Root;
|
|
8
|
+
Trigger: typeof Trigger;
|
|
9
|
+
Content: typeof Content;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type ReactElement } from "react";
|
|
2
|
+
import type { BaseProps } from "./shared.js";
|
|
3
|
+
declare function Root({ children, ...props }: BaseProps): ReactElement;
|
|
4
|
+
declare function Trigger({ children, ...props }: BaseProps): ReactElement;
|
|
5
|
+
declare function Content({ children, ...props }: BaseProps): ReactElement;
|
|
6
|
+
export declare const Tooltip: {
|
|
7
|
+
Root: typeof Root;
|
|
8
|
+
Trigger: typeof Trigger;
|
|
9
|
+
Content: typeof Content;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
package/dist/vue/index.d.ts
CHANGED
package/dist/vue/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{defineComponent as
|
|
1
|
+
import{defineComponent as O,h as D,provide as v,reactive as m,toRef as K,useId as L}from"vue";import{h as q,inject as R}from"vue";function w(x,y){let b=R(x);if(!b)throw Error(`${y} must be used within its parent provider`);return b}var G=(x,y)=>y?`${x}:${y}`:x,N=()=>q("script",{innerHTML:"document.currentScript.parentNode.setAttribute('hidden','until-found')"}),Q=Symbol("CollapsibleContext"),W=Symbol("AccordionContext"),J=Symbol("TabsContext"),S=Symbol("MenuContext"),A=Symbol("MenuPopupContext"),X=Symbol("PopoverContext"),Y=Symbol("TooltipContext");var f=O({props:{type:{type:String,default:"single"}},setup(x,{slots:y}){let b=L();return()=>D("div",{"data-mode":x.type,id:`mcr:accordion:${b}`},y.default?.())}}),a=O({props:{open:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(x,{slots:y}){let b=L();return v(W,m({baseId:b,open:K(x,"open"),disabled:K(x,"disabled")})),()=>D("div",null,y.default?.())}}),I=O({props:{as:{type:String,default:"h3"}},setup(x,{slots:y}){return()=>D(x.as,null,y.default?.())}}),h=O({setup(x,{slots:y}){let b=w(W,"Accordion.Trigger/Panel");return()=>D("button",{type:"button",id:`mct:accordion:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:accordion:${b.baseId}`,"aria-disabled":b.disabled||void 0},y.default?.())}}),u=O({setup(x,{slots:y}){let b=w(W,"Accordion.Trigger/Panel");return()=>D("div",{id:`mcc:accordion:${b.baseId}`,role:"region","aria-labelledby":`mct:accordion:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&D(N),y.default?.()])}}),n={Root:f,Item:a,Header:I,Trigger:h,Panel:u};import{defineComponent as F,h as Z,provide as c,reactive as i,toRef as l,useId as d}from"vue";var r=F({props:{open:{type:Boolean,default:!1}},setup(x,{slots:y}){let b=d();return c(Q,i({baseId:b,open:l(x,"open")})),()=>Z("div",null,y.default?.())}}),t=F({setup(x,{slots:y}){let b=w(Q,"Collapsible.Trigger/Panel");return()=>Z("button",{type:"button",id:`mct:collapsible:${b.baseId}`,"aria-expanded":b.open,"aria-controls":`mcc:collapsible:${b.baseId}`},y.default?.())}}),p=F({setup(x,{slots:y}){let b=w(Q,"Collapsible.Trigger/Panel");return()=>Z("div",{id:`mcc:collapsible:${b.baseId}`,"aria-labelledby":`mct:collapsible:${b.baseId}`,"aria-hidden":!b.open,hidden:b.open?void 0:!0},[!b.open&&Z(N),y.default?.()])}}),o={Root:r,Trigger:t,Panel:p};import{defineComponent as E,h as $,onBeforeUpdate as e,provide as U,reactive as s,ref as bb,toRef as yb,useId as H}from"vue";var xb=E({props:{menubar:Boolean},setup(x,{slots:y}){let b=H();return U(S,s({id:b,root:!0,menubar:yb(x,"menubar")})),()=>$("div",{id:`mcr:menu:${b}`},y.default?.())}}),wb=E({setup(x,{slots:y}){let b=w(S,"Menu.Trigger");return()=>$("button",{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"},y.default?.())}}),$b=E({setup(x,{slots:y}){let b=w(S,"Menu.Popover"),M=bb(!1);return e(()=>{M.value=!1}),U(A,{claimFirst:()=>{if(!M.value)return M.value=!0,!0;return!1}}),()=>b.menubar?$("ul",{role:"menubar"},y.default?.()):$("ul",{role:"menu",id:`mcc:menu:${b.id}`,"aria-labelledby":`mct:menu:${b.id}`,"aria-hidden":"true",popover:"manual"},y.default?.())}}),Mb=E({inheritAttrs:!1,props:{disabled:Boolean,href:String},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitem","aria-disabled":"true",tabindex:-1},y.default?.()):x.href?$("a",{...b,role:"menuitem",href:x.href,tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitem",tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),zb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitemcheckbox","aria-checked":x.checked,"aria-disabled":"true",tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitemcheckbox","aria-checked":x.checked,tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),Eb=E({inheritAttrs:!1,props:{checked:{type:Boolean,default:!1},disabled:Boolean},setup(x,{slots:y,attrs:b}){return()=>{let M=x.disabled?$("span",{...b,role:"menuitemradio","aria-checked":x.checked,"aria-disabled":"true",tabindex:-1},y.default?.()):$("button",{...b,type:"button",role:"menuitemradio","aria-checked":x.checked,tabindex:-1},y.default?.());return $("li",{role:"none"},[M])}}}),Nb=E({setup(x,{slots:y}){return()=>$("li",{role:"presentation"},y.default?.())}}),Sb=E({setup(){return()=>$("li",{role:"separator"})}}),Db=E({setup(x,{slots:y}){let b=w(S,"Menu.Group"),z=w(A,"Menu.Group").claimFirst(),C=H(),j=z&&b.menubar&&!b.submenu;return U(S,{id:C,submenu:!0,first:j}),()=>$("li",{role:"none"},y.default?.())}}),Jb={Root:xb,Trigger:wb,Popover:$b,Item:Mb,CheckboxItem:zb,RadioItem:Eb,Label:Nb,Separator:Sb,Group:Db};import{defineComponent as T,h as g,provide as Ob,useId as Pb}from"vue";var Qb=T({setup(x,{slots:y}){let b=Pb();return Ob(X,{id:b}),()=>g("div",null,y.default?.())}}),Wb=T({setup(x,{slots:y}){let b=w(X,"Popover.Trigger");return()=>g("button",{type:"button",id:`mct:popover:${b.id}`,"aria-controls":`mcc:popover:${b.id}`,"aria-expanded":"false"},y.default?.())}}),Xb=T({setup(x,{slots:y}){let b=w(X,"Popover.Content");return()=>g("div",{id:`mcc:popover:${b.id}`,"aria-labelledby":`mct:popover:${b.id}`,"aria-hidden":"true",popover:"manual",tabindex:-1},y.default?.())}}),Yb={Root:Qb,Trigger:Wb,Content:Xb};import{computed as _,defineComponent as B,h as P,provide as Zb,reactive as _b,toRef as Bb,useId as Gb}from"vue";var Ab=B({props:{defaultValue:{type:String,required:!0},orientation:{type:String,default:"horizontal"}},setup(x,{slots:y}){let b=Gb();return Zb(J,_b({baseId:b,selected:x.defaultValue,orientation:Bb(x,"orientation")})),()=>P("div",{"data-orientation":x.orientation,id:`mcr:tabs:${b}`},y.default?.())}}),Fb=B({setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel");return()=>P("div",{role:"tablist","aria-orientation":b.orientation},y.default?.())}}),Ub=B({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},disabled:Boolean},setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel"),M=_(()=>G(b.baseId,x.value)),z=_(()=>x.selected!==null?x.selected:x.value===b.selected);return()=>P("button",{type:"button",role:"tab",id:`mct:tabs:${M.value}`,"aria-selected":z.value,"aria-controls":`mcc:tabs:${M.value}`,tabindex:z.value?0:-1,"aria-disabled":x.disabled||void 0},y.default?.())}}),Tb=B({props:{value:{type:String,required:!0},selected:{type:[Boolean,null],default:null},focusable:{type:Boolean,default:!0}},setup(x,{slots:y}){let b=w(J,"Tabs.List/Tab/Panel"),M=_(()=>G(b.baseId,x.value)),z=_(()=>x.selected!==null?x.selected:x.value===b.selected);return()=>P("div",{role:"tabpanel",id:`mcc:tabs:${M.value}`,"aria-labelledby":`mct:tabs:${M.value}`,"aria-hidden":!z.value,hidden:z.value?void 0:!0,tabindex:x.focusable?z.value?0:-1:void 0,"data-orientation":b.orientation},[!z.value&&P(N),y.default?.()])}}),gb={Root:Ab,List:Fb,Tab:Ub,Panel:Tb};import{defineComponent as V,h as k,provide as Vb,useId as kb}from"vue";var Kb=V({setup(x,{slots:y}){let b=kb();return Vb(Y,{id:b}),()=>k("div",null,y.default?.())}}),Lb=V({setup(x,{slots:y}){let b=w(Y,"Tooltip.Trigger");return()=>k("button",{type:"button",id:`mct:tooltip:${b.id}`,"aria-describedby":`mcc:tooltip:${b.id}`},y.default?.())}}),Hb=V({setup(x,{slots:y}){let b=w(Y,"Tooltip.Content");return()=>k("div",{id:`mcc:tooltip:${b.id}`,role:"tooltip",popover:"manual"},y.default?.())}}),Cb={Root:Kb,Trigger:Lb,Content:Hb};export{Cb as Tooltip,gb as Tabs,Yb as Popover,Jb as Menu,o as Collapsible,n as Accordion};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const Popover: {
|
|
2
|
+
Root: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
Trigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
Content: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
11
|
+
};
|
package/dist/vue/shared.d.ts
CHANGED
|
@@ -33,3 +33,11 @@ export type MenuPopupContext = {
|
|
|
33
33
|
claimFirst: () => boolean;
|
|
34
34
|
};
|
|
35
35
|
export declare const MenuPopupKey: InjectionKey<MenuPopupContext>;
|
|
36
|
+
export type PopoverContext = {
|
|
37
|
+
id: string;
|
|
38
|
+
};
|
|
39
|
+
export declare const PopoverKey: InjectionKey<PopoverContext>;
|
|
40
|
+
export type TooltipContext = {
|
|
41
|
+
id: string;
|
|
42
|
+
};
|
|
43
|
+
export declare const TooltipKey: InjectionKey<TooltipContext>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const Tooltip: {
|
|
2
|
+
Root: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
Trigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
Content: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "monochrome",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.",
|
|
5
5
|
"author": "Colin van Eenige",
|
|
6
6
|
"license": "MIT",
|
|
@@ -96,15 +96,17 @@
|
|
|
96
96
|
"vue": "3.5.29"
|
|
97
97
|
},
|
|
98
98
|
"versionMeta": {
|
|
99
|
-
"gzipSize":
|
|
99
|
+
"gzipSize": 2640,
|
|
100
100
|
"routerGzipSize": 1052,
|
|
101
101
|
"tests": {
|
|
102
|
-
"total":
|
|
102
|
+
"total": 438,
|
|
103
103
|
"collapsible": 42,
|
|
104
104
|
"router": 28,
|
|
105
105
|
"accordion": 66,
|
|
106
|
-
"menu":
|
|
107
|
-
"
|
|
106
|
+
"menu": 179,
|
|
107
|
+
"tooltip": 24,
|
|
108
|
+
"tabs": 70,
|
|
109
|
+
"popover": 29
|
|
108
110
|
}
|
|
109
111
|
}
|
|
110
112
|
}
|