@radui/ui 1.0.1 → 1.1.0

package/dist/components/{index-CoPhBYnZ.cjs → index-K0sE1H4u.cjs}

@@ -1 +1 @@
-'use client';"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./index-CbKtybdA.cjs"),r=require("./index-BwNOI8cB.cjs"),i=require("./mergeProps-DW5qFqqJ.cjs"),o=require("./index-WGIYLuwZ.cjs"),s=require("./keyboard-BBlFllyi.cjs");const a=t.createContext(void 0),c=()=>{const e=t.useContext(a);if(!e)throw new Error("Collapsible compound components must be used within a CollapsiblePrimitive.Root component");return e},u=t.forwardRef((({children:i,defaultOpen:o=!1,open:s,onOpenChange:c,disabled:u=!1,transitionDuration:l,transitionTimingFunction:d="linear",...m},p)=>{const h=t.useId(),[f,v]=r.useControllableState(s,o,c);return e.jsx(a.Provider,{value:{open:f,onOpenChange:e=>{u||v(e)},disabled:u,contentId:h,transitionDuration:l,transitionTimingFunction:d},children:e.jsx(n.Primitive.div,{...m,ref:p,"data-state":f?"open":"closed","data-disabled":u?"":void 0,children:i})})}));u.displayName="CollapsiblePrimitiveRoot";function l(){const[e,n]=t.useState(!1);return t.useEffect((()=>{if("undefined"==typeof window||"function"!=typeof window.matchMedia)return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=e=>{n(e.matches)};return t(e),"function"==typeof e.addEventListener?(e.addEventListener("change",t),()=>e.removeEventListener("change",t)):(e.addListener(t),()=>e.removeListener(t))}),[]),e}const d=t.forwardRef((({children:r,className:o,asChild:s=!1,forceMount:a=!1,style:u,...d},m)=>{const{open:p,contentId:h,transitionDuration:f,transitionTimingFunction:v}=c(),g=l(),y=void 0!==f?f:g?0:300,[C,b]=t.useState(p?void 0:0),[P,w]=t.useState(p||a),[,x]=t.useState(0),R=t.useRef(),F=t.useRef(),E=t.useRef(null),T=t.useRef(0),q=t.useRef(0),D=t.useRef(),j=t.useRef(p||a);t.useEffect((()=>{const e=requestAnimationFrame((()=>{j.current=!1}));return()=>cancelAnimationFrame(e)}),[]),t.useLayoutEffect((()=>{R.current&&clearTimeout(R.current),F.current&&cancelAnimationFrame(F.current);const e=E.current;if(!e)return;D.current=D.current||{transitionDuration:e.style.transitionDuration,transitionProperty:e.style.transitionProperty,transitionTimingFunction:e.style.transitionTimingFunction},e.style.transitionDuration="0s",e.style.transitionProperty="none";const t=e.getBoundingClientRect(),n=t.height||e.scrollHeight,r=t.width||e.scrollWidth;return T.current=n,q.current=r,j.current||(e.style.transitionDuration=D.current.transitionDuration,e.style.transitionProperty=D.current.transitionProperty,e.style.transitionTimingFunction=D.current.transitionTimingFunction),0===y?(b(p?void 0:0),w(!(!p&&!a)),void(p&&x((e=>e+1)))):j.current&&p?(w(!0),void b(void 0)):(p?(w(!0),b(0),F.current=requestAnimationFrame((()=>{E.current,F.current=requestAnimationFrame((()=>{E.current&&b(T.current??E.current.scrollHeight)}))})),R.current=setTimeout((()=>{b(void 0)}),y)):(b(T.current??e.scrollHeight),F.current=requestAnimationFrame((()=>{E.current,F.current=requestAnimationFrame((()=>{b(0)}))})),R.current=setTimeout((()=>{a||w(!1)}),y)),()=>{R.current&&clearTimeout(R.current),F.current&&cancelAnimationFrame(F.current)})}),[p,y,a]),t.useLayoutEffect((()=>{const e=E.current;if(!e||!p||void 0!==C)return;const t=e.getBoundingClientRect(),n=t.height||e.scrollHeight,r=t.width||e.scrollWidth;n===T.current&&r===q.current||(T.current=n,q.current=r,x((e=>e+1)))}),[r,p,C]);if(!(p||P||a))return null;const A={...u,overflow:"hidden",height:void 0!==C?`${C}px`:void 0,"--radix-collapsible-content-height":void 0!==T.current?`${T.current}px`:void 0,"--radix-collapsible-content-width":void 0!==q.current?`${q.current}px`:void 0,"--rad-collapsible-content-height":void 0!==T.current?`${T.current}px`:void 0,"--rad-collapsible-content-width":void 0!==q.current?`${q.current}px`:void 0,...y>0?{transition:`height ${y}ms ${v}`}:{}},L=s&&t.isValidElement(r);return e.jsx(n.Primitive.div,{id:h,ref:i.composeRefs(m,E),"aria-hidden":!p,"data-state":p?"open":"closed",className:o,style:A,asChild:L,...d,children:r})}));d.displayName="CollapsiblePrimitiveContent";const m=t.forwardRef((({children:t,asChild:n=!1,...r},i)=>{const{open:a,onOpenChange:u,disabled:l,contentId:d}=c();return e.jsx(o.ButtonPrimitive,{...r,"aria-controls":d,"aria-expanded":a,"data-state":a?"open":"closed","data-disabled":l?"true":void 0,ref:i,onClick:e=>{r.onClick?.(e),l||u(!a)},onKeyDown:e=>{r.onKeyDown?.(e),e.defaultPrevented||e.key===s.KEYBOARD_KEYS.ESCAPE&&a&&!l&&u(!1)},asChild:n,children:t})}));m.displayName="CollapsiblePrimitiveTrigger";const p=()=>(console.warn("Direct usage of CollapsiblePrimitive is not supported. Please use CollapsiblePrimitive.Root, CollapsiblePrimitive.Content, etc. instead."),null);p.Root=u,p.Content=d,p.Trigger=m,exports.CollapsiblePrimitive=p,exports.usePrefersReducedMotion=l;
+'use client';"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./index-Bg-UeWCo.cjs"),r=require("./index-BwNOI8cB.cjs"),i=require("./mergeProps-DW5qFqqJ.cjs"),o=require("./index-BZO29jsF.cjs"),s=require("./keyboard-BBlFllyi.cjs");const a=t.createContext(void 0),c=()=>{const e=t.useContext(a);if(!e)throw new Error("Collapsible compound components must be used within a CollapsiblePrimitive.Root component");return e},u=t.forwardRef((({children:i,defaultOpen:o=!1,open:s,onOpenChange:c,disabled:u=!1,transitionDuration:l,transitionTimingFunction:d="linear",...m},p)=>{const h=t.useId(),[f,v]=r.useControllableState(s,o,c);return e.jsx(a.Provider,{value:{open:f,onOpenChange:e=>{u||v(e)},disabled:u,contentId:h,transitionDuration:l,transitionTimingFunction:d},children:e.jsx(n.Primitive.div,{...m,ref:p,"data-state":f?"open":"closed","data-disabled":u?"":void 0,children:i})})}));u.displayName="CollapsiblePrimitiveRoot";function l(){const[e,n]=t.useState(!1);return t.useEffect((()=>{if("undefined"==typeof window||"function"!=typeof window.matchMedia)return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=e=>{n(e.matches)};return t(e),"function"==typeof e.addEventListener?(e.addEventListener("change",t),()=>e.removeEventListener("change",t)):(e.addListener(t),()=>e.removeListener(t))}),[]),e}const d=t.forwardRef((({children:r,className:o,asChild:s=!1,forceMount:a=!1,style:u,...d},m)=>{const{open:p,contentId:h,transitionDuration:f,transitionTimingFunction:v}=c(),g=l(),y=void 0!==f?f:g?0:300,[C,b]=t.useState(p?void 0:0),[P,w]=t.useState(p||a),[,x]=t.useState(0),R=t.useRef(),F=t.useRef(),E=t.useRef(null),T=t.useRef(0),q=t.useRef(0),D=t.useRef(),j=t.useRef(p||a);t.useEffect((()=>{const e=requestAnimationFrame((()=>{j.current=!1}));return()=>cancelAnimationFrame(e)}),[]),t.useLayoutEffect((()=>{R.current&&clearTimeout(R.current),F.current&&cancelAnimationFrame(F.current);const e=E.current;if(!e)return;D.current=D.current||{transitionDuration:e.style.transitionDuration,transitionProperty:e.style.transitionProperty,transitionTimingFunction:e.style.transitionTimingFunction},e.style.transitionDuration="0s",e.style.transitionProperty="none";const t=e.getBoundingClientRect(),n=t.height||e.scrollHeight,r=t.width||e.scrollWidth;return T.current=n,q.current=r,j.current||(e.style.transitionDuration=D.current.transitionDuration,e.style.transitionProperty=D.current.transitionProperty,e.style.transitionTimingFunction=D.current.transitionTimingFunction),0===y?(b(p?void 0:0),w(!(!p&&!a)),void(p&&x((e=>e+1)))):j.current&&p?(w(!0),void b(void 0)):(p?(w(!0),b(0),F.current=requestAnimationFrame((()=>{E.current,F.current=requestAnimationFrame((()=>{E.current&&b(T.current??E.current.scrollHeight)}))})),R.current=setTimeout((()=>{b(void 0)}),y)):(b(T.current??e.scrollHeight),F.current=requestAnimationFrame((()=>{E.current,F.current=requestAnimationFrame((()=>{b(0)}))})),R.current=setTimeout((()=>{a||w(!1)}),y)),()=>{R.current&&clearTimeout(R.current),F.current&&cancelAnimationFrame(F.current)})}),[p,y,a]),t.useLayoutEffect((()=>{const e=E.current;if(!e||!p||void 0!==C)return;const t=e.getBoundingClientRect(),n=t.height||e.scrollHeight,r=t.width||e.scrollWidth;n===T.current&&r===q.current||(T.current=n,q.current=r,x((e=>e+1)))}),[r,p,C]);if(!(p||P||a))return null;const A={...u,overflow:"hidden",height:void 0!==C?`${C}px`:void 0,"--radix-collapsible-content-height":void 0!==T.current?`${T.current}px`:void 0,"--radix-collapsible-content-width":void 0!==q.current?`${q.current}px`:void 0,"--rad-collapsible-content-height":void 0!==T.current?`${T.current}px`:void 0,"--rad-collapsible-content-width":void 0!==q.current?`${q.current}px`:void 0,...y>0?{transition:`height ${y}ms ${v}`}:{}},L=s&&t.isValidElement(r);return e.jsx(n.Primitive.div,{id:h,ref:i.composeRefs(m,E),"aria-hidden":!p,"data-state":p?"open":"closed",className:o,style:A,asChild:L,...d,children:r})}));d.displayName="CollapsiblePrimitiveContent";const m=t.forwardRef((({children:t,asChild:n=!1,...r},i)=>{const{open:a,onOpenChange:u,disabled:l,contentId:d}=c();return e.jsx(o.ButtonPrimitive,{...r,"aria-controls":d,"aria-expanded":a,"data-state":a?"open":"closed","data-disabled":l?"true":void 0,ref:i,onClick:e=>{r.onClick?.(e),l||u(!a)},onKeyDown:e=>{r.onKeyDown?.(e),e.defaultPrevented||e.key===s.KEYBOARD_KEYS.ESCAPE&&a&&!l&&u(!1)},asChild:n,children:t})}));m.displayName="CollapsiblePrimitiveTrigger";const p=()=>(console.warn("Direct usage of CollapsiblePrimitive is not supported. Please use CollapsiblePrimitive.Root, CollapsiblePrimitive.Content, etc. instead."),null);p.Root=u,p.Content=d,p.Trigger=m,exports.CollapsiblePrimitive=p,exports.usePrefersReducedMotion=l;

package/dist/components/{index-BeakeOqt.cjs → index-rUSzFrhJ.cjs}

@@ -1 +1 @@
-'use client';"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./index-CbKtybdA.cjs"),n=require("./index-WGIYLuwZ.cjs"),i=require("./keyboard-BBlFllyi.cjs"),l=require("./mergeRefs-BUn-enYe.cjs");const a=t.createContext({orientation:"horizontal",loop:!0,dir:"ltr",disableTabIndexing:!1,mode:"default"}),o=new Set(["listbox","menu","menubar","radiogroup","scrollbar","select","separator","slider","tablist","toolbar","tree","treegrid"]),s=t.forwardRef((({children:n,orientation:i="horizontal",loop:l=!0,"aria-label":s,"aria-labelledby":u,disableTabIndexing:d=!1,mode:c="default",dir:f="ltr",asChild:b=!1,...m},h)=>{const g=b&&t.isValidElement(n)?n.props.role:void 0,I=m.role??g,R="both"!==i&&I&&o.has(I)?i:void 0,p={orientation:i,loop:l,disableTabIndexing:d,dir:f,mode:c};return e.jsx(a.Provider,{value:p,children:e.jsx(r.Primitive.div,{"aria-orientation":R,"aria-label":s,"aria-labelledby":u,ref:h,asChild:b,...m,children:n})})}));s.displayName="RovingFocusRoot";const u=t.createContext({focusedItemId:null,setFocusedItemId:()=>{},focusItems:[],setFocusItems:()=>{},addFocusItem:()=>{},groupRef:null,itemRefs:new Map,registerItemRef:()=>{},unregisterItemRef:()=>{}}),d=t.forwardRef((({children:o,"aria-label":s,"aria-labelledby":d,role:c,type:f,handleRightKeyDown:b,handleLeftKeyDown:m,domId:h,...g},I)=>{const R=t.useId(),p=h??R,v=t.useRef(null),{focusedItemId:y,setFocusedItemId:E,addFocusItem:x,focusItems:O,itemRefs:D,registerItemRef:C,unregisterItemRef:A}=t.useContext(u),{orientation:K,loop:F,disableTabIndexing:_,dir:Y}=t.useContext(a),w=t.Children.toArray(o)[0],N=!0===w?.props?.disabled,S="a"===("string"==typeof w?.type?w.type.toLowerCase():"")||null!=w?.props?.href,k=c??(S?void 0:"button"),P=f??(S?void 0:"button"),T=_||!N&&y===p?0:-1;t.useEffect((()=>(C(p,v),x(p),()=>{A(p)})),[p]);const j=e=>{E(e);const t=D.get(e);t?.current&&t.current.focus()},B=(e,t)=>{let r=e;for(let e=0;e<O.length;e++){if(r+=t,F)r<0&&(r=O.length-1),r>=O.length&&(r=0);else if(r<0||r>=O.length)return-1;const e=O[r],n=D.get(e);if(!n?.current)continue;if(!("true"===n.current.getAttribute("data-child-disabled")))return r}return-1},q=()=>{const e=O.indexOf(p),t=B(e,-1);-1!==t&&j(O[t])},G=()=>{const e=O.indexOf(p),t=B(e,1);-1!==t&&j(O[t])},W=S?r.Primitive.button:n.ButtonPrimitive;return e.jsx(W,{asChild:!0,onFocus:e=>{N&&e.target.blur(),N||E(p)},tabIndex:T,ref:l.mergeRefs(v,I),id:p,onKeyDown:e=>{if(!N)switch(e.key){case i.KEYBOARD_KEYS.ARROW_UP:e.preventDefault(),"vertical"!==K&&"both"!==K||q();break;case i.KEYBOARD_KEYS.ARROW_LEFT:e.preventDefault(),m&&m(),"horizontal"!==K&&"both"!==K||("rtl"===Y?G():q());break;case i.KEYBOARD_KEYS.ARROW_DOWN:e.preventDefault(),"vertical"!==K&&"both"!==K||G();break;case i.KEYBOARD_KEYS.ARROW_RIGHT:e.preventDefault(),b&&b(),"horizontal"!==K&&"both"!==K||("rtl"===Y?q():G());break;case i.KEYBOARD_KEYS.HOME:e.preventDefault(),(()=>{if(O.length>0){const e=B(-1,1);-1!==e&&j(O[e])}})();break;case i.KEYBOARD_KEYS.END:e.preventDefault(),(()=>{if(O.length>0){const e=B(O.length,-1);-1!==e&&j(O[e])}})();case i.KEYBOARD_KEYS.TAB:}},"data-child-disabled":N,role:k,type:P,"aria-disabled":N,"aria-label":s,"aria-labelledby":d,...g,children:o})}));d.displayName="RovingFocusItem";const c={Root:s,Group:({children:n,"aria-label":i,"aria-labelledby":l,asChild:a,...o})=>{const s=t.useRef(null),[d,c]=t.useState([]),[f,b]=t.useState(null),m=t.useId(),h=t.useRef(new Map),g=t.useCallback((e=>e.find((e=>{const t=h.current.get(e);return"true"!==t?.current?.getAttribute("data-child-disabled")}))??null),[]),I=t.useCallback(((e,t)=>{h.current.set(e,t)}),[]),R=t.useCallback((e=>{h.current.delete(e),c((t=>t.filter((t=>t!==e))))}),[]),p=t.useCallback((e=>{"undefined"==typeof window?c((t=>t.includes(e)?t:[...t,e])):c((t=>{if(t.includes(e))return t;const r=Array.from(h.current.entries()).filter((([,e])=>e.current));r.sort((([,e],[,t])=>{const r=e.current,n=t.current;if(!r||!n)return 0;const i=r.compareDocumentPosition(n);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0}));const n=r.map((([e])=>e));return n.length===t.length&&n.every(((e,r)=>e===t[r]))?t:n}))}),[]);t.useEffect((()=>{if(0===d.length)return void(null!==f&&b(null));const e=f?h.current.get(f):null;if(!(null!=f&&"true"!==e?.current?.getAttribute("data-child-disabled"))){const e=g(d);e!==f&&b(e)}}),[g,d,f,b]);const v={focusedItemId:f,setFocusedItemId:b,focusItems:d,setFocusItems:c,addFocusItem:p,groupRef:s,itemRefs:h.current,registerItemRef:I,unregisterItemRef:R},y=t.Children.toArray(n),E=1===y.length&&t.isValidElement(y[0])&&y[0].type!==t.Fragment,x=a??E;return e.jsx(u.Provider,{value:v,children:e.jsx(r.Primitive.div,{id:m,ref:s,role:"group","aria-label":i,"aria-labelledby":l,asChild:x,...o,children:n})})},Item:d};exports.RovingFocusGroupContext=u,exports.RovingFocusGroupUtility=c;
+'use client';"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./index-Bg-UeWCo.cjs"),n=require("./index-BZO29jsF.cjs"),i=require("./keyboard-BBlFllyi.cjs"),l=require("./mergeRefs-BUn-enYe.cjs");const a=t.createContext({orientation:"horizontal",loop:!0,dir:"ltr",disableTabIndexing:!1,mode:"default"}),o=new Set(["listbox","menu","menubar","radiogroup","scrollbar","select","separator","slider","tablist","toolbar","tree","treegrid"]),s=t.forwardRef((({children:n,orientation:i="horizontal",loop:l=!0,"aria-label":s,"aria-labelledby":u,disableTabIndexing:d=!1,mode:c="default",dir:f="ltr",asChild:b=!1,...m},h)=>{const g=b&&t.isValidElement(n)?n.props.role:void 0,I=m.role??g,R="both"!==i&&I&&o.has(I)?i:void 0,p={orientation:i,loop:l,disableTabIndexing:d,dir:f,mode:c};return e.jsx(a.Provider,{value:p,children:e.jsx(r.Primitive.div,{"aria-orientation":R,"aria-label":s,"aria-labelledby":u,ref:h,asChild:b,...m,children:n})})}));s.displayName="RovingFocusRoot";const u=t.createContext({focusedItemId:null,setFocusedItemId:()=>{},focusItems:[],setFocusItems:()=>{},addFocusItem:()=>{},groupRef:null,itemRefs:new Map,registerItemRef:()=>{},unregisterItemRef:()=>{}}),d=t.forwardRef((({children:o,"aria-label":s,"aria-labelledby":d,role:c,type:f,handleRightKeyDown:b,handleLeftKeyDown:m,domId:h,...g},I)=>{const R=t.useId(),p=h??R,v=t.useRef(null),{focusedItemId:y,setFocusedItemId:E,addFocusItem:x,focusItems:O,itemRefs:D,registerItemRef:C,unregisterItemRef:A}=t.useContext(u),{orientation:K,loop:F,disableTabIndexing:_,dir:Y}=t.useContext(a),w=t.Children.toArray(o)[0],N=!0===w?.props?.disabled,S="a"===("string"==typeof w?.type?w.type.toLowerCase():"")||null!=w?.props?.href,k=c??(S?void 0:"button"),P=f??(S?void 0:"button"),T=_||!N&&y===p?0:-1;t.useEffect((()=>(C(p,v),x(p),()=>{A(p)})),[p]);const j=e=>{E(e);const t=D.get(e);t?.current&&t.current.focus()},B=(e,t)=>{let r=e;for(let e=0;e<O.length;e++){if(r+=t,F)r<0&&(r=O.length-1),r>=O.length&&(r=0);else if(r<0||r>=O.length)return-1;const e=O[r],n=D.get(e);if(!n?.current)continue;if(!("true"===n.current.getAttribute("data-child-disabled")))return r}return-1},q=()=>{const e=O.indexOf(p),t=B(e,-1);-1!==t&&j(O[t])},G=()=>{const e=O.indexOf(p),t=B(e,1);-1!==t&&j(O[t])},W=S?r.Primitive.button:n.ButtonPrimitive;return e.jsx(W,{asChild:!0,onFocus:e=>{N&&e.target.blur(),N||E(p)},tabIndex:T,ref:l.mergeRefs(v,I),id:p,onKeyDown:e=>{if(!N)switch(e.key){case i.KEYBOARD_KEYS.ARROW_UP:e.preventDefault(),"vertical"!==K&&"both"!==K||q();break;case i.KEYBOARD_KEYS.ARROW_LEFT:e.preventDefault(),m&&m(),"horizontal"!==K&&"both"!==K||("rtl"===Y?G():q());break;case i.KEYBOARD_KEYS.ARROW_DOWN:e.preventDefault(),"vertical"!==K&&"both"!==K||G();break;case i.KEYBOARD_KEYS.ARROW_RIGHT:e.preventDefault(),b&&b(),"horizontal"!==K&&"both"!==K||("rtl"===Y?q():G());break;case i.KEYBOARD_KEYS.HOME:e.preventDefault(),(()=>{if(O.length>0){const e=B(-1,1);-1!==e&&j(O[e])}})();break;case i.KEYBOARD_KEYS.END:e.preventDefault(),(()=>{if(O.length>0){const e=B(O.length,-1);-1!==e&&j(O[e])}})();case i.KEYBOARD_KEYS.TAB:}},"data-child-disabled":N,role:k,type:P,"aria-disabled":N,"aria-label":s,"aria-labelledby":d,...g,children:o})}));d.displayName="RovingFocusItem";const c={Root:s,Group:({children:n,"aria-label":i,"aria-labelledby":l,asChild:a,...o})=>{const s=t.useRef(null),[d,c]=t.useState([]),[f,b]=t.useState(null),m=t.useId(),h=t.useRef(new Map),g=t.useCallback((e=>e.find((e=>{const t=h.current.get(e);return"true"!==t?.current?.getAttribute("data-child-disabled")}))??null),[]),I=t.useCallback(((e,t)=>{h.current.set(e,t)}),[]),R=t.useCallback((e=>{h.current.delete(e),c((t=>t.filter((t=>t!==e))))}),[]),p=t.useCallback((e=>{"undefined"==typeof window?c((t=>t.includes(e)?t:[...t,e])):c((t=>{if(t.includes(e))return t;const r=Array.from(h.current.entries()).filter((([,e])=>e.current));r.sort((([,e],[,t])=>{const r=e.current,n=t.current;if(!r||!n)return 0;const i=r.compareDocumentPosition(n);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0}));const n=r.map((([e])=>e));return n.length===t.length&&n.every(((e,r)=>e===t[r]))?t:n}))}),[]);t.useEffect((()=>{if(0===d.length)return void(null!==f&&b(null));const e=f?h.current.get(f):null;if(!(null!=f&&"true"!==e?.current?.getAttribute("data-child-disabled"))){const e=g(d);e!==f&&b(e)}}),[g,d,f,b]);const v={focusedItemId:f,setFocusedItemId:b,focusItems:d,setFocusItems:c,addFocusItem:p,groupRef:s,itemRefs:h.current,registerItemRef:I,unregisterItemRef:R},y=t.Children.toArray(n),E=1===y.length&&t.isValidElement(y[0])&&y[0].type!==t.Fragment,x=a??E;return e.jsx(u.Provider,{value:v,children:e.jsx(r.Primitive.div,{id:m,ref:s,role:"group","aria-label":i,"aria-labelledby":l,asChild:x,...o,children:n})})},Item:d};exports.RovingFocusGroupContext=u,exports.RovingFocusGroupUtility=c;

package/dist/index.cjs

@@ -18,6 +18,7 @@ exports.Em = require('./components/Em.cjs').default;
 exports.Heading = require('./components/Heading.cjs').default;
 exports.Text = require('./components/Text.cjs').default;
 exports.Kbd = require('./components/Kbd.cjs').default;
+exports.Label = require('./components/Label.cjs').default;
 exports.LiveRegion = require('./components/LiveRegion.cjs').default;
 exports.Progress = require('./components/Progress.cjs').default;
 exports.Separator = require('./components/Separator.cjs').default;
@@ -48,6 +49,7 @@ exports.DropdownMenu = require('./components/DropdownMenu.cjs').default;
 exports.Fieldset = require('./components/Fieldset.cjs').default;
 exports.HoverCard = require('./components/HoverCard.cjs').default;
 exports.Menubar = require('./components/Menubar.cjs').default;
+exports.Meter = require('./components/Meter.cjs').default;
 exports.Minimap = require('./components/Minimap.cjs').default;
 exports.NavigationMenu = require('./components/NavigationMenu.cjs').default;
 exports.NumberField = require('./components/NumberField.cjs').default;

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as Em } from './components/Em.js';
 export { default as Heading } from './components/Heading.js';
 export { default as Text } from './components/Text.js';
 export { default as Kbd } from './components/Kbd.js';
+export { default as Label } from './components/Label.js';
 export { default as LiveRegion } from './components/LiveRegion.js';
 export { default as Progress } from './components/Progress.js';
 export { default as Separator } from './components/Separator.js';
@@ -45,6 +46,7 @@ export { default as DropdownMenu } from './components/DropdownMenu.js';
 export { default as Fieldset } from './components/Fieldset.js';
 export { default as HoverCard } from './components/HoverCard.js';
 export { default as Menubar } from './components/Menubar.js';
+export { default as Meter } from './components/Meter.js';
 export { default as Minimap } from './components/Minimap.js';
 export { default as NavigationMenu } from './components/NavigationMenu.js';
 export { default as NumberField } from './components/NumberField.js';

package/dist/index.js

@@ -17,6 +17,7 @@ export { default as Em } from './components/Em.js';
 export { default as Heading } from './components/Heading.js';
 export { default as Text } from './components/Text.js';
 export { default as Kbd } from './components/Kbd.js';
+export { default as Label } from './components/Label.js';
 export { default as LiveRegion } from './components/LiveRegion.js';
 export { default as Progress } from './components/Progress.js';
 export { default as Separator } from './components/Separator.js';
@@ -47,6 +48,7 @@ export { default as DropdownMenu } from './components/DropdownMenu.js';
 export { default as Fieldset } from './components/Fieldset.js';
 export { default as HoverCard } from './components/HoverCard.js';
 export { default as Menubar } from './components/Menubar.js';
+export { default as Meter } from './components/Meter.js';
 export { default as Minimap } from './components/Minimap.js';
 export { default as NavigationMenu } from './components/NavigationMenu.js';
 export { default as NumberField } from './components/NumberField.js';

package/dist/styles/clarity/Accordion/accordion.clarity.scss

@@ -0,0 +1,147 @@
+.rad-ui-accordion-root {
+  width: 100%;
+
+    .rad-ui-accordion-item {
+      border-bottom: 1px solid var(--rad-ui-border-soft);
+
+    &[data-disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .rad-ui-accordion-header {
+      display: flex;
+      margin: 0;
+    }
+
+      .rad-ui-accordion-trigger {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rad-ui-spacing-4);
+      padding: 1rem 4px;
+      font-size: var(--rad-ui-component-font-size-comfortable);
+      font-weight: 600;
+      line-height: 1.4;
+      background-color: transparent;
+      color: var(--rad-ui-text-primary);
+      border: none;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: var(--rad-ui-focus-ring-shadow-offset);
+        border-radius: var(--rad-ui-radius-sm);
+      }
+
+      &[aria-disabled="true"] {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      // Chevron icon
+      svg,
+      .rad-ui-accordion-chevron {
+        height: 1.125rem;
+        width: 1.125rem;
+        flex-shrink: 0;
+        color: var(--rad-ui-text-secondary);
+        transition: transform var(--rad-ui-motion-duration-normal) ease;
+      }
+    }
+
+    &[data-state="open"] {
+      .rad-ui-accordion-trigger {
+        svg,
+        .rad-ui-accordion-chevron {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .rad-ui-accordion-content {
+      overflow: hidden;
+      font-size: var(--rad-ui-component-font-size-comfortable);
+      line-height: 1.6;
+      color: var(--rad-ui-text-secondary);
+
+      .rad-ui-accordion-content-inner {
+        padding-bottom: 1rem;
+
+        > :first-child {
+          margin-top: 0;
+        }
+
+        > :last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    /* Opt-in expand/collapse animation.
+     *
+     * The default panel animates via the inline `height` the Collapsible
+     * primitive sets, which works but is limited to a height tween. This
+     * variant uses the `grid-template-rows: 0fr -> 1fr` technique instead,
+     * which also fades and slides the panel in.
+     *
+     * `height: auto !important` is required, not stylistic: it overrides the
+     * inline height the primitive writes during its own tween. Without it the
+     * two animations fight and the panel snaps. Because the inline height is
+     * discarded, callers using this variant should pass `forceMount` so the
+     * panel stays mounted and the collapse can finish.
+     *
+     * The bottom spacing moves from the panel's `padding-bottom` onto its
+     * last child as a `margin-bottom`. Padding on the grid item does not
+     * collapse with a `0fr` track: the padding box still occupies 1rem, so
+     * the closed panel reserved a 1rem gap under the trigger. A margin on
+     * the child is outside the collapsed track and collapses with it. The
+     * base rule zeroes the last child's margin, so this has to override it;
+     * both selectors compile to (0,5,0) and this one is later in the file.
+     *
+     * Removed in 798f9c8f along with the `WithAnimation` story and left
+     * unreplaced; restored here so the story and the docs example share one
+     * definition. */
+    .rad-ui-accordion-content-animated {
+      height: auto !important;
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--rad-ui-motion-duration-normal) ease;
+
+      .rad-ui-accordion-content-inner {
+        min-height: 0;
+        padding-bottom: 0;
+        transform-origin: top;
+        opacity: 0;
+        transform: translateY(-8px) scaleY(0.96);
+        transition: opacity var(--rad-ui-motion-duration-normal) ease, transform var(--rad-ui-motion-duration-normal) ease;
+
+        > *:last-child {
+          margin-bottom: 1rem;
+        }
+      }
+
+      &[data-state="open"] {
+        grid-template-rows: 1fr;
+
+        .rad-ui-accordion-content-inner {
+          opacity: 1;
+          transform: translateY(0) scaleY(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+
+        .rad-ui-accordion-content-inner {
+          opacity: 1;
+          transform: none;
+          transition: none;
+        }
+      }
+    }
+  }
+}

package/dist/styles/clarity/AlertDialog/alert-dialog.clarity.scss

@@ -0,0 +1,199 @@
+@use '../Button/button.clarity';
+
+%rad-ui-alert-dialog-action-skin {
+  @extend .rad-ui-button-root;
+
+  min-height: var(--rad-ui-control-height-md);
+  padding-inline: calc(var(--rad-ui-control-padding-x-md) + var(--rad-ui-density-gap-xs));
+  border-radius: var(--rad-ui-control-radius-lg);
+  font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  font-weight: var(--rad-ui-component-font-weight-medium);
+  letter-spacing: -0.03em;
+  background-color: var(--rad-ui-surface-inverse);
+  color: var(--rad-ui-text-inverse);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-surface-inverse);
+  box-shadow: var(--rad-ui-control-shadow);
+
+  &:hover {
+    background-color: var(--rad-ui-text-primary);
+    border-color: var(--rad-ui-text-primary);
+  }
+}
+
+%rad-ui-alert-dialog-cancel-skin {
+  @extend .rad-ui-button-root;
+
+  min-height: var(--rad-ui-control-height-md);
+  padding-inline: calc(var(--rad-ui-control-padding-x-md) + var(--rad-ui-density-gap-xs));
+  border-radius: var(--rad-ui-control-radius-lg);
+  font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  font-weight: var(--rad-ui-component-font-weight-medium);
+  letter-spacing: -0.03em;
+  background-color: var(--rad-ui-surface-panel);
+  color: var(--rad-ui-text-primary);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+  box-shadow: var(--rad-ui-control-shadow);
+
+  &:hover {
+    background-color: var(--rad-ui-surface-subtle);
+    border-color: var(--rad-ui-border-default);
+    color: var(--rad-ui-text-primary);
+  }
+}
+
+.rad-ui-alert-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rad-ui-z-index-overlay);
+  background-color: var(--rad-ui-overlay-scrim);
+  backdrop-filter: blur(var(--rad-ui-blur-lg));
+  overflow: hidden;
+  transition:
+    opacity var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    visibility var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+  
+  &[data-state="open"] {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  &[data-state="closed"] {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.rad-ui-alert-dialog-trigger {
+  @extend .rad-ui-button-root;
+
+  cursor: pointer;
+}
+
+.rad-ui-alert-dialog-content {
+  --rad-ui-alert-dialog-body-font-size: calc(var(--rad-ui-font-size-2) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-alert-dialog-title-font-size-mobile: calc(var(--rad-ui-font-size-3) - (var(--rad-ui-spacing-1) / 4));
+  --rad-ui-alert-dialog-inline-padding: var(--rad-ui-spacing-4);
+  --rad-ui-alert-dialog-inline-padding-mobile: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: var(--rad-ui-z-index-portal);
+  width: 100%;
+  max-width: var(--rad-ui-overlay-width-lg);
+  transform: translate(-50%, -50%);
+  padding: var(--rad-ui-spacing-4) var(--rad-ui-alert-dialog-inline-padding) 0;
+  border-radius: var(--rad-ui-panel-radius-lg);
+  background-color: var(--rad-ui-surface-panel);
+  color: var(--rad-ui-text-primary);
+  border: var(--rad-ui-border-width-default) solid var(--rad-ui-border-default);
+  box-shadow: var(--rad-ui-elevation-lg-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  transition:
+    opacity var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    visibility var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard),
+    transform var(--rad-ui-motion-duration-normal) var(--rad-ui-motion-easing-standard);
+  
+  &[data-state="open"] {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  
+  &[data-state="closed"] {
+    opacity: 0;
+    visibility: hidden;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  
+  &:focus {
+    outline: none;
+  }
+  
+  // Nested child components
+  .rad-ui-alert-dialog-title {
+    font-size: var(--rad-ui-font-size-3);
+    font-weight: var(--rad-ui-component-font-weight-medium);
+    line-height: calc(var(--rad-ui-component-line-height-tight) + 0.15);
+    margin: 0;
+    margin-bottom: var(--rad-ui-spacing-2);
+    color: var(--rad-ui-text-primary);
+    letter-spacing: -0.05em;
+  }
+
+  .rad-ui-alert-dialog-description {
+    max-width: calc(var(--rad-ui-overlay-width-lg) - var(--rad-ui-spacing-12) - var(--rad-ui-size-4));
+    font-size: var(--rad-ui-alert-dialog-body-font-size);
+    font-weight: var(--rad-ui-component-font-weight-regular);
+    line-height: calc(var(--rad-ui-component-line-height-normal) + 0.2);
+    margin: 0;
+    margin-bottom: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    color: var(--rad-ui-text-muted);
+    letter-spacing: -0.025em;
+  }
+  
+  .rad-ui-alert-dialog-footer {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--rad-ui-spacing-2);
+    margin: 0 calc(var(--rad-ui-alert-dialog-inline-padding) * -1);
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-alert-dialog-inline-padding) var(--rad-ui-spacing-4);
+    border-top: var(--rad-ui-border-width-default) solid var(--rad-ui-border-soft);
+    background-color: var(--rad-ui-surface-subtle);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    
+    @media (width > 640px) {
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    
+    .rad-ui-alert-dialog-action {
+      @extend %rad-ui-alert-dialog-action-skin;
+    }
+    
+    .rad-ui-alert-dialog-cancel {
+      @extend %rad-ui-alert-dialog-cancel-skin;
+    }
+  }
+
+  @media (width <= 640px) {
+    max-width: calc(100% - 2rem);
+    margin: var(--rad-ui-spacing-4);
+    padding: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs)) var(--rad-ui-alert-dialog-inline-padding-mobile) 0;
+    border-radius: calc(var(--rad-ui-panel-radius-md) + var(--rad-ui-density-gap-xs));
+
+    .rad-ui-alert-dialog-title {
+      font-size: var(--rad-ui-alert-dialog-title-font-size-mobile);
+      margin-bottom: var(--rad-ui-spacing-2);
+    }
+
+    .rad-ui-alert-dialog-description {
+      font-size: var(--rad-ui-alert-dialog-body-font-size);
+      margin-bottom: calc(var(--rad-ui-spacing-3) + var(--rad-ui-density-gap-xs));
+    }
+
+    .rad-ui-alert-dialog-footer {
+      margin: 0 calc(var(--rad-ui-alert-dialog-inline-padding-mobile) * -1);
+      padding: var(--rad-ui-spacing-3) var(--rad-ui-alert-dialog-inline-padding-mobile) var(--rad-ui-alert-dialog-inline-padding-mobile);
+    }
+
+    .rad-ui-alert-dialog-action,
+    .rad-ui-alert-dialog-cancel {
+      width: 100%;
+    }
+  }
+}
+
+// Standalone button styles (for when used outside of content context)
+.rad-ui-alert-dialog-action {
+  @extend %rad-ui-alert-dialog-action-skin;
+}
+
+.rad-ui-alert-dialog-cancel {
+  @extend %rad-ui-alert-dialog-cancel-skin;
+}

package/dist/styles/clarity/Avatar/_avatar-base.clarity.scss

@@ -0,0 +1,87 @@
+// Base avatar styles - shared between avatar and avatar-group components
+.rad-ui-avatar {
+  position: relative;
+  display: flex;
+  height: var(--rad-ui-size-10); // h-10
+  width: var(--rad-ui-size-10); // w-10
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--rad-ui-radius-full); // rounded-full
+  
+  .rad-ui-avatar-image {
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+
+    // Keep a loading/undecoded image out of the layout so the fallback is the only
+    // visible content until the image is ready (it still loads while hidden).
+    &[data-state="loading"] {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    }
+  }
+  
+  // Default styles (no color prop) — semantic tokens so dark theme keeps contrast vs canvas
+  .rad-ui-avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    font-size: var(--rad-ui-font-size-2); // text-sm
+    line-height: var(--rad-ui-line-height-1);
+    font-weight: 500; // font-medium
+    color: var(--rad-ui-text-primary);
+    background-color: var(--rad-ui-surface-muted);
+    box-shadow: inset 0 0 0 1px var(--rad-ui-border-soft);
+  }
+  
+  // Size variants - must come before more specific selectors
+  &[data-size="sm"],
+  &[data-size="small"] {
+    height: var(--rad-ui-size-8); // h-8
+    width: var(--rad-ui-size-8); // w-8
+    
+    .rad-ui-avatar-fallback {
+      font-size: var(--rad-ui-font-size-1); // text-xs
+    }
+  }
+  
+  &[data-size="lg"],
+  &[data-size="large"] {
+    height: var(--rad-ui-size-12); // h-12
+    width: var(--rad-ui-size-12); // w-12
+    
+    .rad-ui-avatar-fallback {
+      font-size: var(--rad-ui-font-size-3); // text-base
+    }
+  }
+
+  &[data-rad-ui-has-image] {
+    .rad-ui-avatar-fallback {
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-muted);
+      box-shadow: inset 0 0 0 1px var(--rad-ui-border-soft);
+    }
+  }
+
+  // Solid accent fallback: light initials on the 950 step (as Button/Badge solid).
+  // The 800 step cannot carry light or dark text at WCAG AA for most scales
+  // (gray 3.2:1 light / 3.6:1 dark, sky 1.5:1), so it is not used for text surfaces.
+  &[data-color]:not([data-rad-ui-has-image]) {
+    .rad-ui-avatar-fallback {
+      color: var(--rad-ui-color-accent-50);
+      background-color: var(--rad-ui-color-accent-950);
+      box-shadow: var(--rad-ui-shadow-none);
+    }
+  }
+  
+  // Square variant
+  &[data-variant="square"] {
+    border-radius: var(--rad-ui-radius-sm); // rounded-md
+  }
+}

package/dist/styles/clarity/Avatar/avatar.clarity.scss

@@ -0,0 +1 @@
+@use "avatar-base.clarity";

package/dist/styles/clarity/AvatarGroup/avatar-group.clarity.scss

@@ -0,0 +1,122 @@
+/* stylelint-disable no-descending-specificity */
+// Base avatar styles (least specific) - must come first
+@use "../Avatar/avatar-base.clarity";
+
+// Avatar group styles (more specific due to nesting)
+// Note: This file has nested selectors that create specificity conflicts
+// The structure is functionally correct, but stylelint can't handle the nesting properly
+.rad-ui-avatar-group {
+  --rad-ui-avatar-group-overlap: calc(var(--rad-ui-spacing-1) + var(--rad-ui-density-gap-xs));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  
+  .rad-ui-avatar-group-item {
+    position: relative;
+    display: flex;
+    height: var(--rad-ui-size-10); // h-10
+    width: var(--rad-ui-size-10); // w-10
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: var(--rad-ui-radius-full); // rounded-full
+    background-color: var(--rad-ui-surface-panel);
+    box-shadow: 0 0 0 var(--rad-ui-border-width-2) var(--rad-ui-surface-panel);
+    
+    // Overlapping avatars with negative margin
+    &:not(:first-child) {
+      margin-left: calc(var(--rad-ui-avatar-group-overlap) * -1);
+      z-index: 1;
+    }
+    
+    &:first-child {
+      margin-left: 0;
+    }
+    
+    // Nested avatar components - more specific than standalone .rad-ui-avatar
+    .rad-ui-avatar {
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+    }
+    
+    .rad-ui-avatar-image,
+    .rad-ui-avatar-group-avatar {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: inherit;
+
+      // Hidden (but still loading) until decoded, so the fallback is the only
+      // visible content while the image is pending.
+      &[data-state="loading"] {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+      }
+    }
+    
+    // Default styles (no color prop) - muted appearance
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      border-radius: inherit;
+      font-size: var(--rad-ui-font-size-2); // text-sm
+      line-height: var(--rad-ui-line-height-1);
+      font-weight: 600; // font-semibold
+      color: var(--rad-ui-text-primary);
+      background-color: var(--rad-ui-surface-muted);
+    }
+
+    // Item `color` prop: solid accent fallback (same recipe as Avatar).
+    &[data-color]:not([data-rad-ui-has-image]) {
+      .rad-ui-avatar-fallback,
+      .rad-ui-avatar-group-fallback {
+        color: var(--rad-ui-color-accent-50);
+        background-color: var(--rad-ui-color-accent-950);
+      }
+    }
+  }
+  
+  // Size variants — mirror Avatar sizes (accepts both short and library-standard names)
+  &[data-size="sm"] .rad-ui-avatar-group-item,
+  &[data-size="small"] .rad-ui-avatar-group-item {
+    height: var(--rad-ui-size-8);
+    width: var(--rad-ui-size-8);
+
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      font-size: var(--rad-ui-font-size-1);
+    }
+  }
+
+  &[data-size="lg"] .rad-ui-avatar-group-item,
+  &[data-size="large"] .rad-ui-avatar-group-item {
+    height: var(--rad-ui-size-12);
+    width: var(--rad-ui-size-12);
+
+    .rad-ui-avatar-fallback,
+    .rad-ui-avatar-group-fallback {
+      font-size: var(--rad-ui-font-size-3);
+    }
+  }
+
+  &[data-variant="square"] .rad-ui-avatar-group-item {
+    border-radius: var(--rad-ui-radius-sm);
+  }
+
+  // Spacing variant (no overlap) - more specific
+  &[data-variant="spacing"] {
+    gap: var(--rad-ui-spacing-2);
+    
+    .rad-ui-avatar-group-item {
+      margin-left: 0;
+    }
+  }
+  
+}
+/* stylelint-enable no-descending-specificity */