npm - @nofinite/nui - Versions diffs - 1.1.2 → 2.0.0 - Mend

@nofinite/nui 1.1.2 → 2.0.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.

Potentially problematic release.

This version of @nofinite/nui might be problematic. Click here for more details.

Files changed (739) hide show

package/dist/components/pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["/*\r\n Pagination.tsx\r\n * -----------------\r\n * WAI-ARIA compliant pagination component.\r\n \r\n Features:\r\n * - First / Prev / Next / Last controls\r\n * - Arrow key navigation\r\n * - Controlled + fully typed\r\n * - Accessible roles & labels\r\n * - Works with screen readers\r\n * - Theme-aware classes only (no inline styles)\r\n /\r\n\r\n/\r\n Pagination.tsx — FINAL VERSION\r\n * --------------------------------\r\n * - No duplicate keys\r\n * - GitHub-style gap rendering\r\n * - Clean, predictable page logic\r\n * - Fully accessible\r\n * - No external dependencies\r\n /\r\n\r\nimport './Pagination.css';\r\n\r\nexport interface PaginationProps {\r\n page: number; // current page (1-based)\r\n total: number; // total pages\r\n onChange: (p: number) => void;\r\n siblings?: number; // how many pages to show around active page\r\n className?: string;\r\n}\r\n\r\nexport function Pagination({\r\n page,\r\n total,\r\n onChange,\r\n siblings = 1,\r\n className = '',\r\n}: PaginationProps) {\r\n if (total <= 1) return null;\r\n\r\n const goTo = (p: number) => {\r\n if (p < 1 \|\| p > total) return;\r\n onChange(p);\r\n };\r\n\r\n / -------------------------------------------------------\r\n * Page calculation (no duplicates, GitHub-style)\r\n * ------------------------------------------------------/\r\n\r\n const pages: (number \| '...')[] = [];\r\n\r\n const hasLeftGap = page - siblings > 2;\r\n const hasRightGap = page + siblings < total - 1;\r\n\r\n const start = Math.max(1, page - siblings);\r\n const end = Math.min(total, page + siblings);\r\n\r\n // Always add first page\r\n pages.push(1);\r\n\r\n // Left gap …\r\n if (hasLeftGap) pages.push('...');\r\n\r\n // Middle pages\r\n for (let i = start; i <= end; i++) {\r\n if (i !== 1 && i !== total) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n // Right gap …\r\n if (hasRightGap) pages.push('...');\r\n\r\n // Always add last page\r\n if (total > 1) pages.push(total);\r\n\r\n return (\r\n <nav\r\n className={`ui-pagination ${className}`}\r\n aria-label=\"Pagination Navigation\"\r\n >\r\n {/ Previous /}\r\n <button\r\n className=\"ui-page-btn\"\r\n onClick={() => goTo(page - 1)}\r\n disabled={page === 1}\r\n aria-label=\"Previous Page\"\r\n >\r\n ←\r\n </button>\r\n\r\n {/ Pages /}\r\n {pages.map((p, i) =>\r\n p === '...' ? (\r\n <span key={`ellipsis-${i}`} className=\"ui-page-ellipsis\">\r\n …\r\n </span>\r\n ) : (\r\n <button\r\n key={`page-${p}`}\r\n className={`ui-page-btn ${p === page ? 'active' : ''}`}\r\n aria-current={p === page ? 'page' : undefined}\r\n onClick={() => goTo(p)}\r\n >\r\n {p}\r\n </button>\r\n )\r\n )}\r\n\r\n {/ Next */}\r\n <button\r\n className=\"ui-page-btn\"\r\n onClick={() => goTo(page + 1)}\r\n disabled={page === total}\r\n aria-label=\"Next Page\"\r\n >\r\n →\r\n </button>\r\n </nav>\r\n );\r\n}\r\n"],"names":["Pagination","page","total","onChange","siblings","className","goTo","p","pages","hasLeftGap","hasRightGap","start","end","jsxs","jsx","i"],"mappings":";;AAkCO,SAASA,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AACd,GAAoB;AAClB,MAAIH,KAAS,EAAG,QAAO;AAEvB,QAAMI,IAAO,CAACC,MAAc;AAC1B,IAAIA,IAAI,KAAKA,IAAIL,KACjBC,EAASI,CAAC;AAAA,EACZ,GAMMC,IAA4B,CAAA,GAE5BC,IAAaR,IAAOG,IAAW,GAC/BM,IAAcT,IAAOG,IAAWF,IAAQ,GAExCS,IAAQ,KAAK,IAAI,GAAGV,IAAOG,CAAQ,GACnCQ,IAAM,KAAK,IAAIV,GAAOD,IAAOG,CAAQ;AAG3C,EAAAI,EAAM,KAAK,CAAC,GAGRC,KAAYD,EAAM,KAAK,KAAK;AAGhC,WAAS,IAAIG,GAAO,KAAKC,GAAK;AAC5B,IAAI,MAAM,KAAK,MAAMV,KACnBM,EAAM,KAAK,CAAC;AAKhB,SAAIE,KAAaF,EAAM,KAAK,KAAK,GAG7BN,IAAQ,KAAGM,EAAM,KAAKN,CAAK,GAG7B,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,iBAAiBR,CAAS;AAAA,MACrC,cAAW;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,MAAMR,EAAKL,IAAO,CAAC;AAAA,YAC5B,UAAUA,MAAS;AAAA,YACnB,cAAW;AAAA,YACZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKAO,EAAM;AAAA,UAAI,CAACD,GAAGQ,MACbR,MAAM,QACJ,gBAAAO,EAAC,QAAA,EAA2B,WAAU,oBAAmB,UAAA,OAA9C,YAAYC,CAAC,EAExB,IAEA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW,eAAeP,MAAMN,IAAO,WAAW,EAAE;AAAA,cACpD,gBAAcM,MAAMN,IAAO,SAAS;AAAA,cACpC,SAAS,MAAMK,EAAKC,CAAC;AAAA,cAEpB,UAAAA;AAAA,YAAA;AAAA,YALI,QAAQA,CAAC;AAAA,UAAA;AAAA,QAMhB;AAAA,QAKJ,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,MAAMR,EAAKL,IAAO,CAAC;AAAA,YAC5B,UAAUA,MAASC;AAAA,YACnB,cAAW;AAAA,YACZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { cn } from '../../utils';\nimport './Pagination.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {\n /* The current active page number (1-indexed) /\n page: number;\n /* The total number of pages available /\n total: number;\n /* Callback fired when a new page is selected /\n onChange: (page: number) => void;\n /* Number of page links to show on each side of the current page. Defaults to 1. /\n siblings?: number;\n /* Custom class name applied to the root navigation element /\n className?: string;\n /* Disables all interaction with the pagination controls /\n disabled?: boolean;\n}\n\ntype PaginationItem = number \| 'left-ellipsis' \| 'right-ellipsis';\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n Pagination Component\n * * A navigation structure for splitting large lists across multiple pages.\n * * Automatically calculates when to collapse page ranges into ellipses based on siblings.\n * * Uses standard <nav> and <ul> elements for WAI-ARIA compliance.\n /\nexport function Pagination({\n page,\n total,\n onChange,\n siblings = 1,\n className,\n disabled = false,\n ...props\n}: PaginationProps) {\n \n // Guard against invalid ranges supplied by the developer\n const currentPage = Math.max(1, Math.min(page, total));\n\n const goTo = (p: number) => {\n if (disabled \|\| p < 1 \|\| p > total \|\| p === currentPage) return;\n onChange(p);\n };\n\n / ----------------------------------------------------\n Mathematically Perfect Page Generation\n ---------------------------------------------------- /\n const pages = useMemo<PaginationItem[]>(() => {\n // Math: 1 (first) + 1 (last) + 2 (siblings) + 1 (current) + 2 (ellipses)\n const totalPageNumbersToShow = 5 + siblings 2;\n\n // 1. If we don't have enough pages to warrant an ellipsis, show them all\n if (total <= totalPageNumbersToShow) {\n return Array.from({ length: total }, (_, i) => i + 1);\n }\n\n const leftSiblingIndex = Math.max(currentPage - siblings, 1);\n const rightSiblingIndex = Math.min(currentPage + siblings, total);\n\n // 2. We only show an ellipsis if there are MORE than 2 pages hidden\n const showLeftDots = leftSiblingIndex > 2;\n const showRightDots = rightSiblingIndex < total - 2;\n\n const firstPageIndex = 1;\n const lastPageIndex = total;\n\n // Case 1: Show right dots only (e.g., [1] 2 3 4 5 ... 10)\n if (!showLeftDots && showRightDots) {\n const leftItemCount = 3 + 2 * siblings;\n const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);\n return [...leftRange, 'right-ellipsis', lastPageIndex];\n }\n\n // Case 2: Show left dots only (e.g., 1 ... 6 7 8 9 [10])\n if (showLeftDots && !showRightDots) {\n const rightItemCount = 3 + 2 * siblings;\n const rightRange = Array.from({ length: rightItemCount }, (_, i) => total - rightItemCount + 1 + i);\n return [firstPageIndex, 'left-ellipsis', ...rightRange];\n }\n\n // Case 3: Show both dots (e.g., 1 ... 4 [5] 6 ... 10)\n if (showLeftDots && showRightDots) {\n const middleRange = Array.from(\n { length: rightSiblingIndex - leftSiblingIndex + 1 },\n (_, i) => leftSiblingIndex + i\n );\n return [firstPageIndex, 'left-ellipsis', ...middleRange, 'right-ellipsis', lastPageIndex];\n }\n\n return [];\n }, [total, currentPage, siblings]);\n\n if (total <= 1) return null;\n\n /* ----------------------------------------------------\n Render\n ---------------------------------------------------- /\n return (\n <nav\n className={cn(\"nui-pagination\", className)}\n aria-label=\"Pagination Navigation\"\n {...props}\n >\n <ul className=\"nui-pagination-list\">\n \n {/ Previous Button /}\n <li>\n <button\n className=\"nui-pagination-btn nui-pagination-btn--nav\"\n onClick={() => goTo(currentPage - 1)}\n disabled={disabled \|\| currentPage === 1}\n aria-label=\"Previous Page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n </svg>\n </button>\n </li>\n\n {/ Page Numbers & Ellipses /}\n {pages.map((p) => {\n if (p === 'left-ellipsis' \|\| p === 'right-ellipsis') {\n return (\n <li key={p} className=\"nui-pagination-ellipsis\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\n <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\n <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\n </svg>\n </li>\n );\n }\n\n const isCurrent = p === currentPage;\n\n return (\n <li key={`page-${p}`}>\n <button\n className={cn(\n \"nui-pagination-btn\",\n isCurrent && \"nui-pagination-btn--active\"\n )}\n aria-current={isCurrent ? 'page' : undefined}\n aria-label={isCurrent ? `Page ${p}` : `Go to page ${p}`}\n disabled={disabled}\n onClick={() => goTo(p)}\n >\n {p}\n </button>\n </li>\n );\n })}\n\n {/ Next Button */}\n <li>\n <button\n className=\"nui-pagination-btn nui-pagination-btn--nav\"\n onClick={() => goTo(currentPage + 1)}\n disabled={disabled \|\| currentPage === total}\n aria-label=\"Next Page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </button>\n </li>\n </ul>\n </nav>\n );\n}"],"names":["Pagination","page","total","onChange","siblings","className","disabled","props","currentPage","goTo","p","pages","useMemo","totalPageNumbersToShow","_","i","leftSiblingIndex","rightSiblingIndex","showLeftDots","showRightDots","firstPageIndex","lastPageIndex","leftItemCount","rightItemCount","rightRange","middleRange","jsx","cn","jsxs","isCurrent"],"mappings":"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"}

package/dist/components/popover/Popover.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react");;/* empty css              */const m=require("../../utils/restorefocus/restoreFocus.cjs"),k=require("../../utils/trapfocus/trapFocus.cjs"),w=require("../../utils/onclickoutside/onClickOutside.cjs"),x=require("../../utils/portal/portal.cjs"),b=o.createContext(null);function g(){const s=o.useContext(b);if(!s)throw new Error("Popover components must be inside <Popover>");return s}function y({children:s}){const[c,r]=o.useState(!1),n=o.useRef(null),t=o.useRef(null),i=`popover-${o.useId()}`;return o.useEffect(()=>{c||m.restoreFocus(n.current)},[c]),a.jsx(b.Provider,{value:{open:c,setOpen:r,triggerRef:n,contentRef:t,contentId:i},children:a.jsx("div",{className:"ui-popover-root",children:s})})}function E({children:s,className:c=""}){const{open:r,setOpen:n,triggerRef:t,contentId:i}=g();return a.jsx("button",{ref:t,type:"button",className:`ui-popover-trigger ${c}`,"aria-haspopup":"dialog","aria-expanded":r,"aria-controls":r?i:void 0,onClick:u=>{u.stopPropagation(),n(l=>!l)},onKeyDown:u=>{u.key==="Escape"&&r&&(u.stopPropagation(),n(!1))},children:s})}function R({children:s,className:c="",placement:r="bottom",offset:n=8}){const{open:t,setOpen:i,triggerRef:u,contentRef:l,contentId:h}=g(),[P,C]=o.useState(null);return o.useEffect(()=>{if(t&&l.current)return k.trapFocus(l.current)},[t,l]),o.useEffect(()=>t?w.onClickOutside(l,()=>i(!1)):void 0,[t,i,l,u]),o.useEffect(()=>{if(!t)return;const e=p=>{p.key==="Escape"&&(p.stopPropagation(),i(!1))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[t,i]),o.useLayoutEffect(()=>{if(!t||!u.current)return;const e=u.current.getBoundingClientRect(),p=window.scrollX,v=window.scrollY;let f=0,d=0;switch(r){case"bottom":f=e.bottom+n+v,d=e.left+e.width/2+p;break;case"top":f=e.top-n+v,d=e.left+e.width/2+p;break;case"left":f=e.top+e.height/2+v,d=e.left-n+p;break;case"right":f=e.top+e.height/2+v,d=e.right+n+p;break}C({top:f,left:d})},[t,r,n,u]),t?a.jsx(x.Portal,{children:a.jsx("div",{id:h,ref:l,role:"dialog","aria-modal":"true",className:`ui-popover-content ui-popover-${r} ${c}`,style:{position:"absolute",top:P?.top??0,left:P?.left??0},children:s})}):null}function j({children:s="Close",className:c=""}){const{setOpen:r}=g();return a.jsx("button",{type:"button",onClick:()=>r(!1),className:`ui-popover-close ${c}`,children:s})}exports.Popover=y;exports.PopoverClose=j;exports.PopoverContent=R;exports.PopoverTrigger=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react/jsx-runtime"),t=require("react");;/* empty css              */const D=require("../../utils/restorefocus/restoreFocus.cjs"),$=require("../../utils/trapfocus/trapFocus.cjs"),z=require("../../utils/onclickoutside/onClickOutside.cjs"),B=require("../../utils/portal/portal.cjs"),K=require("../../utils/cn/cn.cjs"),S=t.createContext(null);function L(){const a=t.useContext(S);if(!a)throw new Error("Popover components must be inside <Popover>");return a}function q({children:a,defaultOpen:p=!1}){const[o,i]=t.useState(p),d=t.useRef(null),r=t.useRef(null),c=`popover-${t.useId()}`;return t.useEffect(()=>{!o&&d.current&&D.restoreFocus(d.current)},[o]),k.jsx(S.Provider,{value:{open:o,setOpen:i,triggerRef:d,contentRef:r,contentId:c},children:a})}q.displayName="Popover";function O({children:a}){const{open:p,setOpen:o,triggerRef:i,contentId:d}=L(),r=t.Children.only(a),c=r.props.ref??r.ref,f={ref:e=>{i.current=e,typeof c=="function"?c(e):c&&typeof c=="object"&&"current"in c&&(c.current=e)},"aria-haspopup":"dialog","aria-expanded":p,"aria-controls":p?d:void 0,onClick:e=>{e.preventDefault(),o(y=>!y),r.props.onClick?.(e)},onKeyDown:e=>{e.key==="Escape"&&p&&(e.stopPropagation(),o(!1)),r.props.onKeyDown?.(e)}};return t.cloneElement(r,f)}O.displayName="Popover.Trigger";function j({children:a,className:p,placement:o="bottom",offset:i=8,...d}){const{open:r,setOpen:c,triggerRef:f,contentRef:e,contentId:y}=L(),[P,X]=t.useState({top:-9999,left:-9999,arrowX:50,arrowY:50}),[F,I]=t.useState(o);t.useEffect(()=>{if(r&&e.current)return $.trapFocus(e.current)},[r,e]),t.useEffect(()=>r?z.onClickOutside([e,f],()=>{c(!1)}):void 0,[r,c,e,f]),t.useEffect(()=>{if(!r)return;const n=s=>{s.key==="Escape"&&(s.stopPropagation(),c(!1))};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r,c]);const h=t.useCallback(()=>{if(!f.current||!e.current)return;const n=f.current.getBoundingClientRect(),s=e.current.getBoundingClientRect(),g=window.scrollX,v=window.scrollY;let l=0,u=0,Y=50,N=50,w=o;const C=12,E=C,R=document.documentElement.clientWidth-s.width-C,x=C,b=document.documentElement.clientHeight-s.height-C;if(o==="top"||o==="bottom"){const m=n.left+g+n.width/2;u=m-s.width/2,u<E&&(u=E),u>R&&(u=R),Y=m-u,o==="bottom"?(l=n.bottom+v+i,l+s.height>b+v&&(l=n.top+v-s.height-i,w="top")):(l=n.top+v-s.height-i,l<x+v&&(l=n.bottom+v+i,w="bottom"))}else{const m=n.top+v+n.height/2;l=m-s.height/2,l<x&&(l=x),l>b&&(l=b),N=m-l,o==="right"?(u=n.right+g+i,u+s.width>R+g&&(u=n.left+g-s.width-i,w="left")):(u=n.left+g-s.width-i,u<E+g&&(u=n.right+g+i,w="right"))}I(w),X({top:l,left:u,arrowX:Y,arrowY:N})},[o,i,f,e]);return t.useLayoutEffect(()=>{if(r)return h(),window.addEventListener("resize",h),window.addEventListener("scroll",h,!0),()=>{window.removeEventListener("resize",h),window.removeEventListener("scroll",h,!0)}},[r,h]),r?k.jsx(B.Portal,{children:k.jsx("div",{id:y,ref:e,role:"dialog","aria-modal":"true","data-placement":F,className:K.cn("nui-popover-content",p),style:{position:"absolute",top:P.top,left:P.left,"--nui-popover-arrow-x":`${P.arrowX}px`,"--nui-popover-arrow-y":`${P.arrowY}px`},...d,children:a})}):null}j.displayName="Popover.Content";function T({children:a}){const{setOpen:p}=L(),o=t.Children.only(a);return t.cloneElement(o,{onClick:i=>{p(!1),o.props.onClick?.(i)}})}T.displayName="Popover.Close";const A=Object.assign(q,{Trigger:O,Content:j,Close:T});exports.Popover=A;exports.PopoverClose=T;exports.PopoverContent=j;exports.PopoverRoot=q;exports.PopoverTrigger=O;
 //# sourceMappingURL=Popover.cjs.map

package/dist/components/popover/Popover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.cjs","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\r\n createContext,\r\n useContext,\r\n useRef,\r\n useEffect,\r\n useState,\r\n useLayoutEffect,\r\n useId,\r\n} from 'react';\r\n\r\nimport './Popover.css';\r\n\r\n// Import your existing utilities\r\n// Ensure these paths match your folder structure exactly!\r\nimport { Portal, onClickOutside, restoreFocus, trapFocus } from '../../utils/index'; \r\n\r\ntype Placement = 'top' \| 'bottom' \| 'left' \| 'right';\r\n\r\nconst PopoverContext = createContext<{\r\n open: boolean;\r\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\r\n triggerRef: React.RefObject<HTMLElement \| null>;\r\n contentRef: React.RefObject<HTMLDivElement \| null>;\r\n contentId: string;\r\n} \| null>(null);\r\n\r\nfunction usePopover() {\r\n const ctx = useContext(PopoverContext);\r\n if (!ctx) throw new Error('Popover components must be inside <Popover>');\r\n return ctx;\r\n}\r\n\r\n/* -------------------------------------------------------\r\n * Root\r\n * ------------------------------------------------------/\r\nexport function Popover({ children }: { children: React.ReactNode }) {\r\n const [open, setOpen] = useState(false);\r\n const triggerRef = useRef<HTMLElement \| null>(null);\r\n const contentRef = useRef<HTMLDivElement \| null>(null);\r\n const contentId = `popover-${useId()}`;\r\n\r\n // Restore focus to trigger on close\r\n useEffect(() => {\r\n if (!open) {\r\n restoreFocus(triggerRef.current);\r\n }\r\n }, [open]);\r\n\r\n return (\r\n <PopoverContext.Provider\r\n value={{ open, setOpen, triggerRef, contentRef, contentId }}\r\n >\r\n {/ Wrapper ensures trigger stays in document flow /}\r\n <div className=\"ui-popover-root\">{children}</div>\r\n </PopoverContext.Provider>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Trigger\r\n * ------------------------------------------------------/\r\nexport function PopoverTrigger({\r\n children,\r\n className = '',\r\n}: {\r\n children: React.ReactNode;\r\n className?: string;\r\n}) {\r\n const { open, setOpen, triggerRef, contentId } = usePopover();\r\n\r\n return (\r\n <button\r\n ref={triggerRef as React.RefObject<HTMLButtonElement>}\r\n type=\"button\"\r\n className={`ui-popover-trigger ${className}`}\r\n aria-haspopup=\"dialog\"\r\n aria-expanded={open}\r\n aria-controls={open ? contentId : undefined}\r\n onClick={(e) => {\r\n // Stop propagation to prevent immediate close by external listeners\r\n e.stopPropagation();\r\n setOpen((s) => !s);\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Escape' && open) {\r\n e.stopPropagation();\r\n setOpen(false);\r\n }\r\n }}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Content (Portaled & Positioned)\r\n * ------------------------------------------------------/\r\nexport function PopoverContent({\r\n children,\r\n className = '',\r\n placement = 'bottom',\r\n offset = 8,\r\n}: {\r\n children: React.ReactNode;\r\n className?: string;\r\n placement?: Placement;\r\n offset?: number;\r\n}) {\r\n const { open, setOpen, triggerRef, contentRef, contentId } = usePopover();\r\n const [coords, setCoords] = useState<{ top: number; left: number } \| null>(null);\r\n\r\n // 1. Trap Focus when open (FIXED RETURN TYPE)\r\n useEffect(() => {\r\n if (open && contentRef.current) {\r\n // Return the cleanup function from trapFocus\r\n return trapFocus(contentRef.current);\r\n }\r\n // Explicitly return undefined so TS knows we handled the \"else\" case\r\n return undefined;\r\n }, [open, contentRef]);\r\n\r\n // 2. Click Outside Logic\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const cleanup = onClickOutside(contentRef, () => setOpen(false));\r\n return cleanup;\r\n }, [open, setOpen, contentRef, triggerRef]);\r\n\r\n // 3. Global Escape Key\r\n useEffect(() => {\r\n if (!open) return;\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n e.stopPropagation();\r\n setOpen(false);\r\n }\r\n };\r\n document.addEventListener('keydown', handler);\r\n return () => document.removeEventListener('keydown', handler);\r\n }, [open, setOpen]);\r\n\r\n // 4. Calculate Position\r\n useLayoutEffect(() => {\r\n if (!open \|\| !triggerRef.current) return;\r\n\r\n const rect = triggerRef.current.getBoundingClientRect();\r\n const scrollX = window.scrollX;\r\n const scrollY = window.scrollY;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (placement) {\r\n case 'bottom':\r\n top = rect.bottom + offset + scrollY;\r\n left = rect.left + (rect.width / 2) + scrollX;\r\n break;\r\n case 'top':\r\n top = rect.top - offset + scrollY;\r\n left = rect.left + (rect.width / 2) + scrollX;\r\n break;\r\n case 'left':\r\n top = rect.top + (rect.height / 2) + scrollY;\r\n left = rect.left - offset + scrollX;\r\n break;\r\n case 'right':\r\n top = rect.top + (rect.height / 2) + scrollY;\r\n left = rect.right + offset + scrollX;\r\n break;\r\n }\r\n\r\n setCoords({ top, left });\r\n }, [open, placement, offset, triggerRef]);\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <Portal>\r\n <div\r\n id={contentId}\r\n ref={contentRef}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n className={`ui-popover-content ui-popover-${placement} ${className}`}\r\n style={{\r\n position: 'absolute',\r\n top: coords?.top ?? 0,\r\n left: coords?.left ?? 0,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n </Portal>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Close Button\r\n * ------------------------------------------------------*/\r\nexport function PopoverClose({\r\n children = 'Close',\r\n className = '',\r\n}: {\r\n children?: React.ReactNode;\r\n className?: string;\r\n}) {\r\n const { setOpen } = usePopover();\r\n return (\r\n <button\r\n type=\"button\"\r\n onClick={() => setOpen(false)}\r\n className={`ui-popover-close ${className}`}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}"],"names":["PopoverContext","createContext","usePopover","ctx","useContext","Popover","children","open","setOpen","useState","triggerRef","useRef","contentRef","contentId","useId","useEffect","restoreFocus","jsx","PopoverTrigger","className","e","s","PopoverContent","placement","offset","coords","setCoords","trapFocus","onClickOutside","handler","useLayoutEffect","rect","scrollX","scrollY","top","left","Portal","PopoverClose"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.cjs","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n createContext,\n useContext,\n useRef,\n useEffect,\n useState,\n useLayoutEffect,\n useId,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils';\nimport { Portal, restoreFocus, trapFocus, onClickOutside } from '../../utils';\nimport './Popover.css';\n\nexport type PopoverPlacement = 'top' \| 'bottom' \| 'left' \| 'right';\n\n/* -------------------------------------------------------\n * Context\n * ------------------------------------------------------/\ninterface PopoverContextValue {\n open: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n triggerRef: React.RefObject<HTMLElement \| null>;\n contentRef: React.RefObject<HTMLDivElement \| null>;\n contentId: string;\n}\n\nconst PopoverContext = createContext<PopoverContextValue \| null>(null);\n\nfunction usePopover() {\n const ctx = useContext(PopoverContext);\n if (!ctx) throw new Error('Popover components must be inside <Popover>');\n return ctx;\n}\n\n/ -------------------------------------------------------\n * 1. Root\n * ------------------------------------------------------/\n\nexport interface PopoverRootProps {\n children: React.ReactNode; \n defaultOpen?: boolean;\n}\n\n/\n Popover Component (Root)\n * * A non-modal dialog that floats around a trigger element.\n * * Uses Compound Component Architecture.\n /\nexport function PopoverRoot({ children, defaultOpen = false }: PopoverRootProps) {\n const [open, setOpen] = useState(defaultOpen);\n const triggerRef = useRef<HTMLElement \| null>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const contentId = `popover-${useId()}`;\n\n // WAI-ARIA Standard: Restore focus to trigger on close\n useEffect(() => {\n if (!open && triggerRef.current) {\n restoreFocus(triggerRef.current);\n }\n }, [open]);\n\n return (\n <PopoverContext.Provider value={{ open, setOpen, triggerRef, contentRef, contentId }}>\n {children}\n </PopoverContext.Provider>\n );\n}\nPopoverRoot.displayName = 'Popover';\n\n/ -------------------------------------------------------\n * 2. Trigger\n * ------------------------------------------------------/\n\nexport interface PopoverTriggerProps {\n children: React.ReactElement;\n}\n\n/\n Popover Trigger\n * * Automatically clones the child element and injects necessary event listeners and ARIA attributes.\n /\nexport function PopoverTrigger({ children }: PopoverTriggerProps) {\n const { open, setOpen, triggerRef, contentId } = usePopover();\n\n // Safely extract the child and ref\n const child = React.Children.only(children) as React.ReactElement<React.HTMLProps<HTMLElement>>;\n const childRef = child.props.ref ?? (child as unknown as { ref?: React.Ref<HTMLElement> }).ref;\n\n const triggerProps: React.HTMLProps<HTMLElement> = {\n ref: (node: HTMLElement \| null) => {\n triggerRef.current = node;\n if (typeof childRef === 'function') {\n childRef(node);\n } else if (childRef && typeof childRef === 'object' && 'current' in childRef) {\n (childRef as { current: HTMLElement \| null }).current = node;\n }\n },\n 'aria-haspopup': 'dialog',\n 'aria-expanded': open,\n 'aria-controls': open ? contentId : undefined,\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n setOpen((prev) => !prev);\n child.props.onClick?.(e);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Escape' && open) {\n e.stopPropagation();\n setOpen(false);\n }\n child.props.onKeyDown?.(e);\n },\n };\n\n return React.cloneElement(child, triggerProps);\n}\nPopoverTrigger.displayName = 'Popover.Trigger';\n\n/ -------------------------------------------------------\n * 3. Content\n * ------------------------------------------------------/\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n /* Preferred placement of the popover relative to the trigger. Defaults to 'bottom' /\n placement?: PopoverPlacement;\n /* Gap in pixels between the trigger and the popover. Defaults to 8px. /\n offset?: number;\n}\n\n/\n Popover Content\n * * Renders inside a Portal and implements smart collision detection to stay in the viewport.\n * * Automatically traps focus when open.\n /\nexport function PopoverContent({\n children,\n className,\n placement = 'bottom',\n offset = 8,\n ...props\n}: PopoverContentProps) {\n const { open, setOpen, triggerRef, contentRef, contentId } = usePopover();\n const [coords, setCoords] = useState({ top: -9999, left: -9999, arrowX: 50, arrowY: 50 });\n const [actualPlacement, setActualPlacement] = useState<PopoverPlacement>(placement);\n\n // Focus Trapping\n useEffect(() => {\n if (open && contentRef.current) {\n return trapFocus(contentRef.current);\n }\n return undefined;\n }, [open, contentRef]);\n\n // Click Outside Handler\n useEffect(() => {\n if (!open) return;\n const cleanup = onClickOutside([contentRef, triggerRef], () => {\n setOpen(false);\n });\n return cleanup;\n }, [open, setOpen, contentRef, triggerRef]);\n\n // Escape Key Handler\n useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n setOpen(false);\n }\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [open, setOpen]);\n\n // Positioning Math (Includes Boundary Collision)\n const updatePosition = useCallback(() => {\n if (!triggerRef.current \|\| !contentRef.current) return;\n\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const scrollX = window.scrollX;\n const scrollY = window.scrollY;\n\n let top = 0;\n let left = 0;\n let arrowX = 50;\n let arrowY = 50;\n let nextPlacement = placement;\n\n // Viewport boundaries with safety padding\n const padding = 12;\n const minLeft = padding;\n const maxLeft = document.documentElement.clientWidth - contentRect.width - padding;\n const minTop = padding;\n const maxTop = document.documentElement.clientHeight - contentRect.height - padding;\n\n if (placement === 'top' \|\| placement === 'bottom') {\n const actualCenter = triggerRect.left + scrollX + triggerRect.width / 2;\n left = actualCenter - contentRect.width / 2;\n\n // Clamp X\n if (left < minLeft) left = minLeft;\n if (left > maxLeft) left = maxLeft;\n\n // Calculate Arrow X\n arrowX = actualCenter - left;\n\n if (placement === 'bottom') {\n top = triggerRect.bottom + scrollY + offset;\n // Collision Detection: Flip if clipping bottom\n if (top + contentRect.height > maxTop + scrollY) {\n top = triggerRect.top + scrollY - contentRect.height - offset;\n nextPlacement = 'top';\n }\n } else {\n top = triggerRect.top + scrollY - contentRect.height - offset;\n // Collision Detection: Flip if clipping top\n if (top < minTop + scrollY) {\n top = triggerRect.bottom + scrollY + offset;\n nextPlacement = 'bottom';\n }\n }\n } else {\n const actualCenterY = triggerRect.top + scrollY + triggerRect.height / 2;\n top = actualCenterY - contentRect.height / 2;\n\n // Clamp Y\n if (top < minTop) top = minTop;\n if (top > maxTop) top = maxTop;\n\n // Calculate Arrow Y\n arrowY = actualCenterY - top;\n\n if (placement === 'right') {\n left = triggerRect.right + scrollX + offset;\n // Collision Detection: Flip to left if clipping right\n if (left + contentRect.width > maxLeft + scrollX) {\n left = triggerRect.left + scrollX - contentRect.width - offset;\n nextPlacement = 'left';\n }\n } else {\n left = triggerRect.left + scrollX - contentRect.width - offset;\n // Collision Detection: Flip to right if clipping left\n if (left < minLeft + scrollX) {\n left = triggerRect.right + scrollX + offset;\n nextPlacement = 'right';\n }\n }\n }\n\n setActualPlacement(nextPlacement);\n setCoords({ top, left, arrowX, arrowY });\n }, [placement, offset, triggerRef, contentRef]);\n\n useLayoutEffect(() => {\n if (!open) return;\n updatePosition();\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', updatePosition, true);\n return () => {\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', updatePosition, true);\n };\n }, [open, updatePosition]);\n\n if (!open) return null;\n\n return (\n <Portal>\n <div\n id={contentId}\n ref={contentRef}\n role=\"dialog\"\n aria-modal=\"true\"\n data-placement={actualPlacement}\n className={cn('nui-popover-content', className)}\n style={{\n position: 'absolute',\n top: coords.top,\n left: coords.left,\n '--nui-popover-arrow-x': `${coords.arrowX}px`,\n '--nui-popover-arrow-y': `${coords.arrowY}px`,\n } as React.CSSProperties}\n {...props}\n >\n {children}\n </div>\n </Portal>\n );\n}\nPopoverContent.displayName = 'Popover.Content';\n\n/ -------------------------------------------------------\n * 4. Close Button\n * ------------------------------------------------------/\n\nexport interface PopoverCloseProps {\n children: React.ReactElement;\n}\n\n/\n Popover Close\n * * Optional headless wrapper that injects a close action into a child button.\n /\nexport function PopoverClose({ children }: PopoverCloseProps) {\n const { setOpen } = usePopover();\n \n const child = React.Children.only(children) as React.ReactElement<React.HTMLProps<HTMLElement>>;\n \n return React.cloneElement(child, {\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n setOpen(false);\n child.props.onClick?.(e);\n },\n });\n}\nPopoverClose.displayName = 'Popover.Close';\n\n/ -------------------------------------------------------\n * Export\n * ------------------------------------------------------*/\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n});"],"names":["PopoverContext","createContext","usePopover","ctx","useContext","PopoverRoot","children","defaultOpen","open","setOpen","useState","triggerRef","useRef","contentRef","contentId","useId","useEffect","restoreFocus","jsx","PopoverTrigger","child","React","childRef","triggerProps","node","prev","PopoverContent","className","placement","offset","props","coords","setCoords","actualPlacement","setActualPlacement","trapFocus","onClickOutside","handler","e","updatePosition","useCallback","triggerRect","contentRect","scrollX","scrollY","top","left","arrowX","arrowY","nextPlacement","padding","minLeft","maxLeft","minTop","maxTop","actualCenter","actualCenterY","useLayoutEffect","Portal","cn","PopoverClose","Popover"],"mappings":"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"}

package/dist/components/popover/Popover.js CHANGED Viewed

@@ -1,123 +1,122 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useState as b, useRef as h, useId as C, useEffect as m, createContext as y, useLayoutEffect as x, useContext as E } from "react";
+import { jsx as L } from "react/jsx-runtime";
+import y, { useState as O, useRef as X, useId as A, useEffect as P, createContext as H, useCallback as S, useLayoutEffect as W, useContext as q } from "react";
 /* empty css            */
-import { restoreFocus as R } from "../../utils/restorefocus/restoreFocus.js";
-import { trapFocus as O } from "../../utils/trapfocus/trapFocus.js";
-import { onClickOutside as $ } from "../../utils/onclickoutside/onClickOutside.js";
-import { Portal as I } from "../../utils/portal/portal.js";
-const P = y(null);
-function v() {
-  const n = E(P);
-  if (!n) throw new Error("Popover components must be inside <Popover>");
-  return n;
+import { restoreFocus as G } from "../../utils/restorefocus/restoreFocus.js";
+import { trapFocus as J } from "../../utils/trapfocus/trapFocus.js";
+import { onClickOutside as M } from "../../utils/onclickoutside/onClickOutside.js";
+import { Portal as Q } from "../../utils/portal/portal.js";
+import { cn as U } from "../../utils/cn/cn.js";
+const I = H(null);
+function Y() {
+  const p = q(I);
+  if (!p) throw new Error("Popover components must be inside <Popover>");
+  return p;
 }
-function D({ children: n }) {
-  const [s, t] = b(!1), r = h(null), e = h(null), c = `popover-${C()}`;
-  return m(() => {
-    s || R(r.current);
-  }, [s]), /* @__PURE__ */ l(
-    P.Provider,
-    {
-      value: { open: s, setOpen: t, triggerRef: r, contentRef: e, contentId: c },
-      children: /* @__PURE__ */ l("div", { className: "ui-popover-root", children: n })
-    }
-  );
+function j({ children: p, defaultOpen: u = !1 }) {
+  const [e, r] = O(u), a = X(null), o = X(null), i = `popover-${A()}`;
+  return P(() => {
+    !e && a.current && G(a.current);
+  }, [e]), /* @__PURE__ */ L(I.Provider, { value: { open: e, setOpen: r, triggerRef: a, contentRef: o, contentId: i }, children: p });
 }
-function K({
-  children: n,
-  className: s = ""
-}) {
-  const { open: t, setOpen: r, triggerRef: e, contentId: c } = v();
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      ref: e,
-      type: "button",
-      className: `ui-popover-trigger ${s}`,
-      "aria-haspopup": "dialog",
-      "aria-expanded": t,
-      "aria-controls": t ? c : void 0,
-      onClick: (i) => {
-        i.stopPropagation(), r((p) => !p);
-      },
-      onKeyDown: (i) => {
-        i.key === "Escape" && t && (i.stopPropagation(), r(!1));
-      },
-      children: n
+j.displayName = "Popover";
+function D({ children: p }) {
+  const { open: u, setOpen: e, triggerRef: r, contentId: a } = Y(), o = y.Children.only(p), i = o.props.ref ?? o.ref, d = {
+    ref: (t) => {
+      r.current = t, typeof i == "function" ? i(t) : i && typeof i == "object" && "current" in i && (i.current = t);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": u,
+    "aria-controls": u ? a : void 0,
+    onClick: (t) => {
+      t.preventDefault(), e((E) => !E), o.props.onClick?.(t);
+    },
+    onKeyDown: (t) => {
+      t.key === "Escape" && u && (t.stopPropagation(), e(!1)), o.props.onKeyDown?.(t);
     }
-  );
+  };
+  return y.cloneElement(o, d);
 }
-function S({
-  children: n,
-  className: s = "",
-  placement: t = "bottom",
-  offset: r = 8
+D.displayName = "Popover.Trigger";
+function $({
+  children: p,
+  className: u,
+  placement: e = "bottom",
+  offset: r = 8,
+  ...a
 }) {
-  const { open: e, setOpen: c, triggerRef: i, contentRef: p, contentId: w } = v(), [g, k] = b(null);
-  return m(() => {
-    if (e && p.current)
-      return O(p.current);
-  }, [e, p]), m(() => e ? $(p, () => c(!1)) : void 0, [e, c, p, i]), m(() => {
-    if (!e) return;
-    const o = (u) => {
-      u.key === "Escape" && (u.stopPropagation(), c(!1));
+  const { open: o, setOpen: i, triggerRef: d, contentRef: t, contentId: E } = Y(), [w, B] = O({ top: -9999, left: -9999, arrowX: 50, arrowY: 50 }), [F, K] = O(e);
+  P(() => {
+    if (o && t.current)
+      return J(t.current);
+  }, [o, t]), P(() => o ? M([t, d], () => {
+    i(!1);
+  }) : void 0, [o, i, t, d]), P(() => {
+    if (!o) return;
+    const n = (c) => {
+      c.key === "Escape" && (c.stopPropagation(), i(!1));
     };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [e, c]), x(() => {
-    if (!e || !i.current) return;
-    const o = i.current.getBoundingClientRect(), u = window.scrollX, d = window.scrollY;
-    let a = 0, f = 0;
-    switch (t) {
-      case "bottom":
-        a = o.bottom + r + d, f = o.left + o.width / 2 + u;
-        break;
-      case "top":
-        a = o.top - r + d, f = o.left + o.width / 2 + u;
-        break;
-      case "left":
-        a = o.top + o.height / 2 + d, f = o.left - r + u;
-        break;
-      case "right":
-        a = o.top + o.height / 2 + d, f = o.right + r + u;
-        break;
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [o, i]);
+  const g = S(() => {
+    if (!d.current || !t.current) return;
+    const n = d.current.getBoundingClientRect(), c = t.current.getBoundingClientRect(), f = window.scrollX, m = window.scrollY;
+    let s = 0, l = 0, N = 50, T = 50, h = e;
+    const C = 12, x = C, R = document.documentElement.clientWidth - c.width - C, b = C, k = document.documentElement.clientHeight - c.height - C;
+    if (e === "top" || e === "bottom") {
+      const v = n.left + f + n.width / 2;
+      l = v - c.width / 2, l < x && (l = x), l > R && (l = R), N = v - l, e === "bottom" ? (s = n.bottom + m + r, s + c.height > k + m && (s = n.top + m - c.height - r, h = "top")) : (s = n.top + m - c.height - r, s < b + m && (s = n.bottom + m + r, h = "bottom"));
+    } else {
+      const v = n.top + m + n.height / 2;
+      s = v - c.height / 2, s < b && (s = b), s > k && (s = k), T = v - s, e === "right" ? (l = n.right + f + r, l + c.width > R + f && (l = n.left + f - c.width - r, h = "left")) : (l = n.left + f - c.width - r, l < x + f && (l = n.right + f + r, h = "right"));
     }
-    k({ top: a, left: f });
-  }, [e, t, r, i]), e ? /* @__PURE__ */ l(I, { children: /* @__PURE__ */ l(
+    K(h), B({ top: s, left: l, arrowX: N, arrowY: T });
+  }, [e, r, d, t]);
+  return W(() => {
+    if (o)
+      return g(), window.addEventListener("resize", g), window.addEventListener("scroll", g, !0), () => {
+        window.removeEventListener("resize", g), window.removeEventListener("scroll", g, !0);
+      };
+  }, [o, g]), o ? /* @__PURE__ */ L(Q, { children: /* @__PURE__ */ L(
     "div",
     {
-      id: w,
-      ref: p,
+      id: E,
+      ref: t,
       role: "dialog",
       "aria-modal": "true",
-      className: `ui-popover-content ui-popover-${t} ${s}`,
+      "data-placement": F,
+      className: U("nui-popover-content", u),
       style: {
         position: "absolute",
-        top: g?.top ?? 0,
-        left: g?.left ?? 0
+        top: w.top,
+        left: w.left,
+        "--nui-popover-arrow-x": `${w.arrowX}px`,
+        "--nui-popover-arrow-y": `${w.arrowY}px`
       },
-      children: n
+      ...a,
+      children: p
     }
   ) }) : null;
 }
-function T({
-  children: n = "Close",
-  className: s = ""
-}) {
-  const { setOpen: t } = v();
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      type: "button",
-      onClick: () => t(!1),
-      className: `ui-popover-close ${s}`,
-      children: n
+$.displayName = "Popover.Content";
+function z({ children: p }) {
+  const { setOpen: u } = Y(), e = y.Children.only(p);
+  return y.cloneElement(e, {
+    onClick: (r) => {
+      u(!1), e.props.onClick?.(r);
     }
-  );
+  });
 }
+z.displayName = "Popover.Close";
+const it = Object.assign(j, {
+  Trigger: D,
+  Content: $,
+  Close: z
+});
 export {
-  D as Popover,
-  T as PopoverClose,
-  S as PopoverContent,
-  K as PopoverTrigger
+  it as Popover,
+  z as PopoverClose,
+  $ as PopoverContent,
+  j as PopoverRoot,
+  D as PopoverTrigger
 };
 //# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\r\n createContext,\r\n useContext,\r\n useRef,\r\n useEffect,\r\n useState,\r\n useLayoutEffect,\r\n useId,\r\n} from 'react';\r\n\r\nimport './Popover.css';\r\n\r\n// Import your existing utilities\r\n// Ensure these paths match your folder structure exactly!\r\nimport { Portal, onClickOutside, restoreFocus, trapFocus } from '../../utils/index'; \r\n\r\ntype Placement = 'top' \| 'bottom' \| 'left' \| 'right';\r\n\r\nconst PopoverContext = createContext<{\r\n open: boolean;\r\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\r\n triggerRef: React.RefObject<HTMLElement \| null>;\r\n contentRef: React.RefObject<HTMLDivElement \| null>;\r\n contentId: string;\r\n} \| null>(null);\r\n\r\nfunction usePopover() {\r\n const ctx = useContext(PopoverContext);\r\n if (!ctx) throw new Error('Popover components must be inside <Popover>');\r\n return ctx;\r\n}\r\n\r\n/* -------------------------------------------------------\r\n * Root\r\n * ------------------------------------------------------/\r\nexport function Popover({ children }: { children: React.ReactNode }) {\r\n const [open, setOpen] = useState(false);\r\n const triggerRef = useRef<HTMLElement \| null>(null);\r\n const contentRef = useRef<HTMLDivElement \| null>(null);\r\n const contentId = `popover-${useId()}`;\r\n\r\n // Restore focus to trigger on close\r\n useEffect(() => {\r\n if (!open) {\r\n restoreFocus(triggerRef.current);\r\n }\r\n }, [open]);\r\n\r\n return (\r\n <PopoverContext.Provider\r\n value={{ open, setOpen, triggerRef, contentRef, contentId }}\r\n >\r\n {/ Wrapper ensures trigger stays in document flow /}\r\n <div className=\"ui-popover-root\">{children}</div>\r\n </PopoverContext.Provider>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Trigger\r\n * ------------------------------------------------------/\r\nexport function PopoverTrigger({\r\n children,\r\n className = '',\r\n}: {\r\n children: React.ReactNode;\r\n className?: string;\r\n}) {\r\n const { open, setOpen, triggerRef, contentId } = usePopover();\r\n\r\n return (\r\n <button\r\n ref={triggerRef as React.RefObject<HTMLButtonElement>}\r\n type=\"button\"\r\n className={`ui-popover-trigger ${className}`}\r\n aria-haspopup=\"dialog\"\r\n aria-expanded={open}\r\n aria-controls={open ? contentId : undefined}\r\n onClick={(e) => {\r\n // Stop propagation to prevent immediate close by external listeners\r\n e.stopPropagation();\r\n setOpen((s) => !s);\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === 'Escape' && open) {\r\n e.stopPropagation();\r\n setOpen(false);\r\n }\r\n }}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Content (Portaled & Positioned)\r\n * ------------------------------------------------------/\r\nexport function PopoverContent({\r\n children,\r\n className = '',\r\n placement = 'bottom',\r\n offset = 8,\r\n}: {\r\n children: React.ReactNode;\r\n className?: string;\r\n placement?: Placement;\r\n offset?: number;\r\n}) {\r\n const { open, setOpen, triggerRef, contentRef, contentId } = usePopover();\r\n const [coords, setCoords] = useState<{ top: number; left: number } \| null>(null);\r\n\r\n // 1. Trap Focus when open (FIXED RETURN TYPE)\r\n useEffect(() => {\r\n if (open && contentRef.current) {\r\n // Return the cleanup function from trapFocus\r\n return trapFocus(contentRef.current);\r\n }\r\n // Explicitly return undefined so TS knows we handled the \"else\" case\r\n return undefined;\r\n }, [open, contentRef]);\r\n\r\n // 2. Click Outside Logic\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const cleanup = onClickOutside(contentRef, () => setOpen(false));\r\n return cleanup;\r\n }, [open, setOpen, contentRef, triggerRef]);\r\n\r\n // 3. Global Escape Key\r\n useEffect(() => {\r\n if (!open) return;\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.key === 'Escape') {\r\n e.stopPropagation();\r\n setOpen(false);\r\n }\r\n };\r\n document.addEventListener('keydown', handler);\r\n return () => document.removeEventListener('keydown', handler);\r\n }, [open, setOpen]);\r\n\r\n // 4. Calculate Position\r\n useLayoutEffect(() => {\r\n if (!open \|\| !triggerRef.current) return;\r\n\r\n const rect = triggerRef.current.getBoundingClientRect();\r\n const scrollX = window.scrollX;\r\n const scrollY = window.scrollY;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (placement) {\r\n case 'bottom':\r\n top = rect.bottom + offset + scrollY;\r\n left = rect.left + (rect.width / 2) + scrollX;\r\n break;\r\n case 'top':\r\n top = rect.top - offset + scrollY;\r\n left = rect.left + (rect.width / 2) + scrollX;\r\n break;\r\n case 'left':\r\n top = rect.top + (rect.height / 2) + scrollY;\r\n left = rect.left - offset + scrollX;\r\n break;\r\n case 'right':\r\n top = rect.top + (rect.height / 2) + scrollY;\r\n left = rect.right + offset + scrollX;\r\n break;\r\n }\r\n\r\n setCoords({ top, left });\r\n }, [open, placement, offset, triggerRef]);\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <Portal>\r\n <div\r\n id={contentId}\r\n ref={contentRef}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n className={`ui-popover-content ui-popover-${placement} ${className}`}\r\n style={{\r\n position: 'absolute',\r\n top: coords?.top ?? 0,\r\n left: coords?.left ?? 0,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n </Portal>\r\n );\r\n}\r\n\r\n/ -------------------------------------------------------\r\n * Close Button\r\n * ------------------------------------------------------*/\r\nexport function PopoverClose({\r\n children = 'Close',\r\n className = '',\r\n}: {\r\n children?: React.ReactNode;\r\n className?: string;\r\n}) {\r\n const { setOpen } = usePopover();\r\n return (\r\n <button\r\n type=\"button\"\r\n onClick={() => setOpen(false)}\r\n className={`ui-popover-close ${className}`}\r\n >\r\n {children}\r\n </button>\r\n );\r\n}"],"names":["PopoverContext","createContext","usePopover","ctx","useContext","Popover","children","open","setOpen","useState","triggerRef","useRef","contentRef","contentId","useId","useEffect","restoreFocus","jsx","PopoverTrigger","className","e","s","PopoverContent","placement","offset","coords","setCoords","trapFocus","onClickOutside","handler","useLayoutEffect","rect","scrollX","scrollY","top","left","Portal","PopoverClose"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n createContext,\n useContext,\n useRef,\n useEffect,\n useState,\n useLayoutEffect,\n useId,\n useCallback,\n} from 'react';\nimport { cn } from '../../utils';\nimport { Portal, restoreFocus, trapFocus, onClickOutside } from '../../utils';\nimport './Popover.css';\n\nexport type PopoverPlacement = 'top' \| 'bottom' \| 'left' \| 'right';\n\n/* -------------------------------------------------------\n * Context\n * ------------------------------------------------------/\ninterface PopoverContextValue {\n open: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n triggerRef: React.RefObject<HTMLElement \| null>;\n contentRef: React.RefObject<HTMLDivElement \| null>;\n contentId: string;\n}\n\nconst PopoverContext = createContext<PopoverContextValue \| null>(null);\n\nfunction usePopover() {\n const ctx = useContext(PopoverContext);\n if (!ctx) throw new Error('Popover components must be inside <Popover>');\n return ctx;\n}\n\n/ -------------------------------------------------------\n * 1. Root\n * ------------------------------------------------------/\n\nexport interface PopoverRootProps {\n children: React.ReactNode; \n defaultOpen?: boolean;\n}\n\n/\n Popover Component (Root)\n * * A non-modal dialog that floats around a trigger element.\n * * Uses Compound Component Architecture.\n /\nexport function PopoverRoot({ children, defaultOpen = false }: PopoverRootProps) {\n const [open, setOpen] = useState(defaultOpen);\n const triggerRef = useRef<HTMLElement \| null>(null);\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const contentId = `popover-${useId()}`;\n\n // WAI-ARIA Standard: Restore focus to trigger on close\n useEffect(() => {\n if (!open && triggerRef.current) {\n restoreFocus(triggerRef.current);\n }\n }, [open]);\n\n return (\n <PopoverContext.Provider value={{ open, setOpen, triggerRef, contentRef, contentId }}>\n {children}\n </PopoverContext.Provider>\n );\n}\nPopoverRoot.displayName = 'Popover';\n\n/ -------------------------------------------------------\n * 2. Trigger\n * ------------------------------------------------------/\n\nexport interface PopoverTriggerProps {\n children: React.ReactElement;\n}\n\n/\n Popover Trigger\n * * Automatically clones the child element and injects necessary event listeners and ARIA attributes.\n /\nexport function PopoverTrigger({ children }: PopoverTriggerProps) {\n const { open, setOpen, triggerRef, contentId } = usePopover();\n\n // Safely extract the child and ref\n const child = React.Children.only(children) as React.ReactElement<React.HTMLProps<HTMLElement>>;\n const childRef = child.props.ref ?? (child as unknown as { ref?: React.Ref<HTMLElement> }).ref;\n\n const triggerProps: React.HTMLProps<HTMLElement> = {\n ref: (node: HTMLElement \| null) => {\n triggerRef.current = node;\n if (typeof childRef === 'function') {\n childRef(node);\n } else if (childRef && typeof childRef === 'object' && 'current' in childRef) {\n (childRef as { current: HTMLElement \| null }).current = node;\n }\n },\n 'aria-haspopup': 'dialog',\n 'aria-expanded': open,\n 'aria-controls': open ? contentId : undefined,\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n setOpen((prev) => !prev);\n child.props.onClick?.(e);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Escape' && open) {\n e.stopPropagation();\n setOpen(false);\n }\n child.props.onKeyDown?.(e);\n },\n };\n\n return React.cloneElement(child, triggerProps);\n}\nPopoverTrigger.displayName = 'Popover.Trigger';\n\n/ -------------------------------------------------------\n * 3. Content\n * ------------------------------------------------------/\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n /* Preferred placement of the popover relative to the trigger. Defaults to 'bottom' /\n placement?: PopoverPlacement;\n /* Gap in pixels between the trigger and the popover. Defaults to 8px. /\n offset?: number;\n}\n\n/\n Popover Content\n * * Renders inside a Portal and implements smart collision detection to stay in the viewport.\n * * Automatically traps focus when open.\n /\nexport function PopoverContent({\n children,\n className,\n placement = 'bottom',\n offset = 8,\n ...props\n}: PopoverContentProps) {\n const { open, setOpen, triggerRef, contentRef, contentId } = usePopover();\n const [coords, setCoords] = useState({ top: -9999, left: -9999, arrowX: 50, arrowY: 50 });\n const [actualPlacement, setActualPlacement] = useState<PopoverPlacement>(placement);\n\n // Focus Trapping\n useEffect(() => {\n if (open && contentRef.current) {\n return trapFocus(contentRef.current);\n }\n return undefined;\n }, [open, contentRef]);\n\n // Click Outside Handler\n useEffect(() => {\n if (!open) return;\n const cleanup = onClickOutside([contentRef, triggerRef], () => {\n setOpen(false);\n });\n return cleanup;\n }, [open, setOpen, contentRef, triggerRef]);\n\n // Escape Key Handler\n useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n setOpen(false);\n }\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [open, setOpen]);\n\n // Positioning Math (Includes Boundary Collision)\n const updatePosition = useCallback(() => {\n if (!triggerRef.current \|\| !contentRef.current) return;\n\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const scrollX = window.scrollX;\n const scrollY = window.scrollY;\n\n let top = 0;\n let left = 0;\n let arrowX = 50;\n let arrowY = 50;\n let nextPlacement = placement;\n\n // Viewport boundaries with safety padding\n const padding = 12;\n const minLeft = padding;\n const maxLeft = document.documentElement.clientWidth - contentRect.width - padding;\n const minTop = padding;\n const maxTop = document.documentElement.clientHeight - contentRect.height - padding;\n\n if (placement === 'top' \|\| placement === 'bottom') {\n const actualCenter = triggerRect.left + scrollX + triggerRect.width / 2;\n left = actualCenter - contentRect.width / 2;\n\n // Clamp X\n if (left < minLeft) left = minLeft;\n if (left > maxLeft) left = maxLeft;\n\n // Calculate Arrow X\n arrowX = actualCenter - left;\n\n if (placement === 'bottom') {\n top = triggerRect.bottom + scrollY + offset;\n // Collision Detection: Flip if clipping bottom\n if (top + contentRect.height > maxTop + scrollY) {\n top = triggerRect.top + scrollY - contentRect.height - offset;\n nextPlacement = 'top';\n }\n } else {\n top = triggerRect.top + scrollY - contentRect.height - offset;\n // Collision Detection: Flip if clipping top\n if (top < minTop + scrollY) {\n top = triggerRect.bottom + scrollY + offset;\n nextPlacement = 'bottom';\n }\n }\n } else {\n const actualCenterY = triggerRect.top + scrollY + triggerRect.height / 2;\n top = actualCenterY - contentRect.height / 2;\n\n // Clamp Y\n if (top < minTop) top = minTop;\n if (top > maxTop) top = maxTop;\n\n // Calculate Arrow Y\n arrowY = actualCenterY - top;\n\n if (placement === 'right') {\n left = triggerRect.right + scrollX + offset;\n // Collision Detection: Flip to left if clipping right\n if (left + contentRect.width > maxLeft + scrollX) {\n left = triggerRect.left + scrollX - contentRect.width - offset;\n nextPlacement = 'left';\n }\n } else {\n left = triggerRect.left + scrollX - contentRect.width - offset;\n // Collision Detection: Flip to right if clipping left\n if (left < minLeft + scrollX) {\n left = triggerRect.right + scrollX + offset;\n nextPlacement = 'right';\n }\n }\n }\n\n setActualPlacement(nextPlacement);\n setCoords({ top, left, arrowX, arrowY });\n }, [placement, offset, triggerRef, contentRef]);\n\n useLayoutEffect(() => {\n if (!open) return;\n updatePosition();\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', updatePosition, true);\n return () => {\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', updatePosition, true);\n };\n }, [open, updatePosition]);\n\n if (!open) return null;\n\n return (\n <Portal>\n <div\n id={contentId}\n ref={contentRef}\n role=\"dialog\"\n aria-modal=\"true\"\n data-placement={actualPlacement}\n className={cn('nui-popover-content', className)}\n style={{\n position: 'absolute',\n top: coords.top,\n left: coords.left,\n '--nui-popover-arrow-x': `${coords.arrowX}px`,\n '--nui-popover-arrow-y': `${coords.arrowY}px`,\n } as React.CSSProperties}\n {...props}\n >\n {children}\n </div>\n </Portal>\n );\n}\nPopoverContent.displayName = 'Popover.Content';\n\n/ -------------------------------------------------------\n * 4. Close Button\n * ------------------------------------------------------/\n\nexport interface PopoverCloseProps {\n children: React.ReactElement;\n}\n\n/\n Popover Close\n * * Optional headless wrapper that injects a close action into a child button.\n /\nexport function PopoverClose({ children }: PopoverCloseProps) {\n const { setOpen } = usePopover();\n \n const child = React.Children.only(children) as React.ReactElement<React.HTMLProps<HTMLElement>>;\n \n return React.cloneElement(child, {\n onClick: (e: React.MouseEvent<HTMLElement>) => {\n setOpen(false);\n child.props.onClick?.(e);\n },\n });\n}\nPopoverClose.displayName = 'Popover.Close';\n\n/ -------------------------------------------------------\n * Export\n * ------------------------------------------------------*/\nexport const Popover = Object.assign(PopoverRoot, {\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n});"],"names":["PopoverContext","createContext","usePopover","ctx","useContext","PopoverRoot","children","defaultOpen","open","setOpen","useState","triggerRef","useRef","contentRef","contentId","useId","useEffect","restoreFocus","jsx","PopoverTrigger","child","React","childRef","triggerProps","node","e","prev","PopoverContent","className","placement","offset","props","coords","setCoords","actualPlacement","setActualPlacement","trapFocus","onClickOutside","handler","updatePosition","useCallback","triggerRect","contentRect","scrollX","scrollY","top","left","arrowX","arrowY","nextPlacement","padding","minLeft","maxLeft","minTop","maxTop","actualCenter","actualCenterY","useLayoutEffect","Portal","cn","PopoverClose","Popover"],"mappings":"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"}

package/dist/components/progress/Progress.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime");;/* empty css               */function d({value:r,max:i=100,indeterminate:a=!1,label:o="Progress",className:t=""}){const e=a||r===void 0,n=Math.min(Math.max((r??0)/i,0),1)*100;return s.jsx("div",{className:`ui-progress ${t}`,role:"progressbar","aria-valuemin":e?void 0:0,"aria-valuemax":e?void 0:i,"aria-valuenow":e?void 0:r,"aria-label":o,children:s.jsx("div",{className:`ui-progress-bar ${e?"indeterminate":""}`,style:e?void 0:{width:`${n}%`}})})}exports.Progress=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react");;/* empty css               */const v=require("../../utils/cn/cn.cjs"),n=p.forwardRef(({value:s,max:e=100,indeterminate:o=!1,size:t="md",variant:c="default",label:u="Progress",className:l,...d},g)=>{const a=o||s===void 0,i=Math.min(Math.max(s??0,0),e),m=i/e*100;return r.jsx("div",{ref:g,role:"progressbar","aria-valuemin":0,"aria-valuemax":e,"aria-valuenow":a?void 0:i,"aria-label":u,className:v.cn("nui-progress",`nui-progress--${t}`,`nui-progress--${c}`,l),...d,children:a?r.jsx("div",{className:"nui-progress-indicator nui-progress-indicator--indeterminate"}):r.jsx("div",{className:"nui-progress-indicator",style:{transform:`translateX(-${100-m}%)`}})})});n.displayName="Progress";exports.Progress=n;
 //# sourceMappingURL=Progress.cjs.map

package/dist/components/progress/Progress.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.cjs","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["~~/*\r\n~~ ~~Progress.tsx~~ — ~~FINAL~~ ~~VERSION\r\n~~ * ~~--------------------------------\r\n~~ * ~~Features:\r\n~~ * - ~~Determinate mode (value/max)~~\r\n * ~~- Indeterminate mode~~\r\n * - ~~Smooth animation~~\~~r\n~~ * - ~~ARIA~~ ~~compliant~~\r\n * - ~~Pure~~ ~~TSX~~ + ~~CSS~~ ~~(no~~ ~~inline~~ ~~styles~~ ~~except~~ ~~width)\r\n~~ /\r\n~~\r\nimport~~ ~~'./Progress.css'~~;\r\n~~\r\nexport~~ ~~interface~~ ~~ProgressProps~~ {\r\n /* ~~Current~~ ~~value~~ ~~(determinate~~ ~~mode).~~ /\r\n ~~value~~?: ~~number~~;\r\n~~\r\n~~ /* ~~Maximum~~ ~~value~~ ~~(default:~~ ~~100)~~. /\r\n ~~max~~?: ~~number~~;\r\n~~\r\n~~ /* ~~Indeterminate~~ ~~mode~~ ~~when~~ ~~value~~ is ~~undefined~~. /\r\n ~~indeterminate~~?: ~~boolean~~;\r\n~~\r\n~~ /* ~~Optional~~ label for screen readers. /\r\n label?: string~~;\r~~\n\r\n ~~className?:~~ ~~string;\r~~\n}\r\n\r\nexport ~~function~~ Progress({\r\n value,\r\n max = 100,\r\n indeterminate = false,\r\n ~~label~~ = '~~Progress~~',\r\n ~~className~~ = '',\r\n}: ~~ProgressProps~~) {\r\n const isIndeterminate = indeterminate \|\| value === undefined;\r\n\r\n const ~~percentage~~ = Math.min(Math.max((value ?? 0~~) / max~~, 0), 1) 100;\r\n\r\n return (\r\n <div\r\n ~~className~~={~~`ui-progress ${className~~}`}\r\n role=\"progressbar\"\r\n aria-valuemin={~~isIndeterminate ? undefined :~~ 0}\r\n aria-valuemax={~~isIndeterminate ? undefined :~~ max}\r\n aria-valuenow={isIndeterminate ? undefined : ~~value~~}\r\n aria-label={label}\r\n ~~>\r~~\n ~~<div~~\r\n ~~className=~~{`ui-progress~~-bar $~~{isIndeterminate ? 'indeterminate' : ~~''}`}~~\r\n style={~~!isIndeterminate~~ ? { width: `${percentage}%` } ~~: undefined~~}\r\n ~~/>\r~~\n </div>\r\n );\r\n}\~~r\n~~"],"names":["Progress","value","max","indeterminate","label","className","isIndeterminate","percentage","jsx"],"mappings":"~~mJA6BO~~,~~SAASA~~,~~EAAS~~,~~CACvB~~,MAAAC,EACA,IAAAC,EAAM,IACN,cAAAC,EAAgB,GAChB,MAAAC,EAAQ,WACR,UAAAC,~~EAAY~~,~~EACd~~,~~EAAkB~~,~~CAChB~~,MAAMC,~~EAAkBH~~,GAAiBF,IAAU,~~OAE7CM~~,~~EAAa~~,KAAK,IAAI,KAAK,~~KAAKN~~,GAAS,~~GAAKC~~,~~EAAK,~~CAAC,~~EAAG~~,~~CAAC~~,~~EAAI~~,~~IAElE~~,~~OACEM~~,EAAAA,IAAC,MAAA,CACC,~~UAAW~~,~~eAAeH~~,~~CAAS,GACnC,~~KAAK,cACL,~~gBAAeC~~,~~EAAkB~~,~~OAAY~~,~~EAC7C~~,~~gBAAeA~~,EAAkB,~~OAAYJ~~,EAC7C,~~gBAAeI~~,~~EAAkB~~,~~OAAYL~~,~~EAC7C~~,~~aAAYG~~,~~EAEZ~~,~~SAAAI~~,EAAAA,IAAC,MAAA,~~CACC~~,~~UAAW~~,~~mBAAmBF~~,~~EAAkB~~,~~gBAAkB~~,~~EAAE~~,~~GACpE~~,~~MAAQA~~,~~EAAgD~~,~~OAA9B~~,~~CAAE~~,MAAO,~~GAAGC~~,CAAU,~~IAAQ~~,CAAA,~~CAC1D~~,CAAA,~~CAGN~~"}
1	+ {"version":3,"file":"Progress.cjs","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Progress.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /* The current progress value /\n value?: number;\n /* The maximum possible value. Defaults to 100. /\n max?: number;\n /* Forces the progress bar into an animated indeterminate state /\n indeterminate?: boolean;\n /* The visual height of the progress bar. Defaults to 'md'. /\n size?: 'sm' \| 'md' \| 'lg';\n /* The semantic color variant. Defaults to 'default'. /\n variant?: 'default' \| 'success' \| 'warning' \| 'danger';\n /* WAI-ARIA hidden label for screen readers. Defaults to 'Progress'. /\n label?: string; \n}\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n Progress Component\n * * A WAI-ARIA compliant progress bar indicating the completion status of a task.\n * * Architecture Note: Uses CSS `transform: translateX` instead of `width` for \n * hardware-accelerated (GPU) 60fps rendering to prevent layout thrashing on the main thread.\n /\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(({\n value,\n max = 100,\n indeterminate = false,\n size = 'md',\n variant = 'default',\n label = 'Progress',\n className,\n ...props\n}, ref) => {\n // If no value is provided, safely fall back to indeterminate mode\n const isIndeterminate = indeterminate \|\| value === undefined;\n\n // Safely clamp the percentage between 0 and 100 to prevent layout breakage\n const safeValue = Math.min(Math.max(value ?? 0, 0), max);\n const percentage = (safeValue / max) 100;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={max}\n aria-valuenow={isIndeterminate ? undefined : safeValue}\n aria-label={label}\n className={cn(\n \"nui-progress\",\n `nui-progress--${size}`,\n `nui-progress--${variant}`,\n className\n )}\n {...props}\n >\n {isIndeterminate ? (\n /* Hardware-Accelerated Indeterminate Bar /\n <div className=\"nui-progress-indicator nui-progress-indicator--indeterminate\" />\n ) : (\n / Hardware-Accelerated Determinate Bar */\n <div\n className=\"nui-progress-indicator\"\n style={{\n // We use translateX instead of width for buttery smooth 60fps rendering\n transform: `translateX(-${100 - percentage}%)`,\n }}\n />\n )}\n </div>\n );\n});\n\nProgress.displayName = 'Progress';"],"names":["Progress","forwardRef","value","max","indeterminate","size","variant","label","className","props","ref","isIndeterminate","safeValue","percentage","jsx","cn"],"mappings":"+MAiCaA,EAAWC,EAAAA,WAA0C,CAAC,CACjE,MAAAC,EACA,IAAAC,EAAM,IACN,cAAAC,EAAgB,GAChB,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,MAAAC,EAAQ,WACR,UAAAC,EACA,GAAGC,CACL,EAAGC,IAAQ,CAET,MAAMC,EAAkBP,GAAiBF,IAAU,OAG7CU,EAAY,KAAK,IAAI,KAAK,IAAIV,GAAS,EAAG,CAAC,EAAGC,CAAG,EACjDU,EAAcD,EAAYT,EAAO,IAEvC,OACEW,EAAAA,IAAC,MAAA,CACC,IAAAJ,EACA,KAAK,cACL,gBAAe,EACf,gBAAeP,EACf,gBAAeQ,EAAkB,OAAYC,EAC7C,aAAYL,EACZ,UAAWQ,EAAAA,GACT,eACA,iBAAiBV,CAAI,GACrB,iBAAiBC,CAAO,GACxBE,CAAA,EAED,GAAGC,EAEH,SAAAE,EAECG,EAAAA,IAAC,MAAA,CAAI,UAAU,8DAAA,CAA+D,EAG9EA,EAAAA,IAAC,MAAA,CACC,UAAU,yBACV,MAAO,CAEL,UAAW,eAAe,IAAMD,CAAU,IAAA,CAC5C,CAAA,CACF,CAAA,CAIR,CAAC,EAEDb,EAAS,YAAc"}

package/dist/components/progress/Progress.js CHANGED Viewed

@@ -1,33 +1,55 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
 /* empty css             */
-function l({
+import { cn as u } from "../../utils/cn/cn.js";
+const f = g(({
   value: e,
-  max: i = 100,
-  indeterminate: s = !1,
-  label: o = "Progress",
-  className: t = ""
-}) {
-  const r = s || e === void 0, n = Math.min(Math.max((e ?? 0) / i, 0), 1) * 100;
-  return /* @__PURE__ */ a(
+  max: r = 100,
+  indeterminate: o = !1,
+  size: n = "md",
+  variant: t = "default",
+  label: m = "Progress",
+  className: d,
+  ...l
+}, p) => {
+  const a = o || e === void 0, i = Math.min(Math.max(e ?? 0, 0), r), c = i / r * 100;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `ui-progress ${t}`,
+      ref: p,
       role: "progressbar",
-      "aria-valuemin": r ? void 0 : 0,
-      "aria-valuemax": r ? void 0 : i,
-      "aria-valuenow": r ? void 0 : e,
-      "aria-label": o,
-      children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: `ui-progress-bar ${r ? "indeterminate" : ""}`,
-          style: r ? void 0 : { width: `${n}%` }
-        }
+      "aria-valuemin": 0,
+      "aria-valuemax": r,
+      "aria-valuenow": a ? void 0 : i,
+      "aria-label": m,
+      className: u(
+        "nui-progress",
+        `nui-progress--${n}`,
+        `nui-progress--${t}`,
+        d
+      ),
+      ...l,
+      children: a ? (
+        /* Hardware-Accelerated Indeterminate Bar */
+        /* @__PURE__ */ s("div", { className: "nui-progress-indicator nui-progress-indicator--indeterminate" })
+      ) : (
+        /* Hardware-Accelerated Determinate Bar */
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "nui-progress-indicator",
+            style: {
+              // We use translateX instead of width for buttery smooth 60fps rendering
+              transform: `translateX(-${100 - c}%)`
+            }
+          }
+        )
       )
     }
   );
-}
+});
+f.displayName = "Progress";
 export {
-  l as Progress
+  f as Progress
 };
 //# sourceMappingURL=Progress.js.map

package/dist/components/progress/Progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.js","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["~~/*\r\n~~ ~~Progress.tsx~~ — ~~FINAL~~ ~~VERSION\r\n~~ * ~~--------------------------------\r\n~~ * ~~Features:\r\n~~ * - ~~Determinate mode (value/max)~~\r\n * ~~- Indeterminate mode~~\r\n * - ~~Smooth animation~~\~~r\n~~ * - ~~ARIA~~ ~~compliant~~\r\n * - ~~Pure~~ ~~TSX~~ + ~~CSS~~ ~~(no~~ ~~inline~~ ~~styles~~ ~~except~~ ~~width)\r\n~~ /\r\n~~\r\nimport~~ ~~'./Progress.css'~~;\r\n~~\r\nexport~~ ~~interface~~ ~~ProgressProps~~ {\r\n /* ~~Current~~ ~~value~~ ~~(determinate~~ ~~mode).~~ /\r\n ~~value~~?: ~~number~~;\r\n~~\r\n~~ /* ~~Maximum~~ ~~value~~ ~~(default:~~ ~~100)~~. /\r\n ~~max~~?: ~~number~~;\r\n~~\r\n~~ /* ~~Indeterminate~~ ~~mode~~ ~~when~~ ~~value~~ is ~~undefined~~. /\r\n ~~indeterminate~~?: ~~boolean~~;\r\n~~\r\n~~ /* ~~Optional~~ label for screen readers. /\r\n label?: string~~;\r~~\n\r\n ~~className?:~~ ~~string;\r~~\n}\r\n\r\nexport ~~function~~ Progress({\r\n value,\r\n max = 100,\r\n indeterminate = false,\r\n ~~label~~ = '~~Progress~~',\r\n ~~className~~ = '',\r\n}: ~~ProgressProps~~) {\r\n const isIndeterminate = indeterminate \|\| value === undefined;\r\n\r\n const ~~percentage~~ = Math.min(Math.max((value ?? 0~~) / max~~, 0), 1) 100;\r\n\r\n return (\r\n <div\r\n ~~className~~={~~`ui-progress ${className~~}`}\r\n role=\"progressbar\"\r\n aria-valuemin={~~isIndeterminate ? undefined :~~ 0}\r\n aria-valuemax={~~isIndeterminate ? undefined :~~ max}\r\n aria-valuenow={isIndeterminate ? undefined : ~~value~~}\r\n aria-label={label}\r\n ~~>\r~~\n ~~<div~~\r\n ~~className=~~{`ui-progress~~-bar $~~{isIndeterminate ? 'indeterminate' : ~~''}`}~~\r\n style={~~!isIndeterminate~~ ? { width: `${percentage}%` } ~~: undefined~~}\r\n ~~/>\r~~\n </div>\r\n );\r\n}\~~r\n~~"],"names":["Progress","value","max","indeterminate","label","className","isIndeterminate","percentage","jsx"],"mappings":"~~;;AA6BO~~,~~SAASA~~,~~EAAS~~;AAAA,~~EACvB~~,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,WAAAC,~~IAAY~~;~~AACd~~,~~GAAkB~~;~~AAChB~~,QAAMC,~~IAAkBH~~,KAAiBF,MAAU,~~QAE7CM~~,~~IAAa~~,KAAK,IAAI,KAAK,~~KAAKN~~,KAAS,~~KAAKC~~,~~GAAK,~~CAAC,~~GAAG~~,~~CAAC~~,~~IAAI~~;~~AAElE~~,SACE,~~gBAAAM~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,~~WAAW,eAAeH,CAAS~~;AAAA,~~MACnC~~,MAAK;AAAA,MACL,~~iBAAeC~~,~~IAAkB~~,~~SAAY~~;AAAA,~~MAC7C~~,~~iBAAeA~~,IAAkB,~~SAAYJ~~;AAAA,MAC7C,~~iBAAeI~~,~~IAAkB~~,~~SAAYL~~;AAAA,~~MAC7C~~,~~cAAYG~~;AAAA,~~MAEZ~~,~~UAAA~~,~~gBAAAI~~;AAAA,~~QAAC~~;AAAA,~~QAAA~~;AAAA,~~UACC~~,~~WAAW~~,~~mBAAmBF~~,~~IAAkB~~,~~kBAAkB~~,~~EAAE~~;AAAA,~~UACpE~~,~~OAAQA~~,~~IAAgD~~,~~SAA9B~~,~~EAAE~~,OAAO,~~GAAGC~~,CAAU;~~QAAQ~~;AAAA,~~MAAA~~;AAAA,~~IAC1D~~;AAAA,EAAA;~~AAGN~~;"}
1	+ {"version":3,"file":"Progress.js","sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Progress.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /* The current progress value /\n value?: number;\n /* The maximum possible value. Defaults to 100. /\n max?: number;\n /* Forces the progress bar into an animated indeterminate state /\n indeterminate?: boolean;\n /* The visual height of the progress bar. Defaults to 'md'. /\n size?: 'sm' \| 'md' \| 'lg';\n /* The semantic color variant. Defaults to 'default'. /\n variant?: 'default' \| 'success' \| 'warning' \| 'danger';\n /* WAI-ARIA hidden label for screen readers. Defaults to 'Progress'. /\n label?: string; \n}\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n Progress Component\n * * A WAI-ARIA compliant progress bar indicating the completion status of a task.\n * * Architecture Note: Uses CSS `transform: translateX` instead of `width` for \n * hardware-accelerated (GPU) 60fps rendering to prevent layout thrashing on the main thread.\n /\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(({\n value,\n max = 100,\n indeterminate = false,\n size = 'md',\n variant = 'default',\n label = 'Progress',\n className,\n ...props\n}, ref) => {\n // If no value is provided, safely fall back to indeterminate mode\n const isIndeterminate = indeterminate \|\| value === undefined;\n\n // Safely clamp the percentage between 0 and 100 to prevent layout breakage\n const safeValue = Math.min(Math.max(value ?? 0, 0), max);\n const percentage = (safeValue / max) 100;\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-valuemin={0}\n aria-valuemax={max}\n aria-valuenow={isIndeterminate ? undefined : safeValue}\n aria-label={label}\n className={cn(\n \"nui-progress\",\n `nui-progress--${size}`,\n `nui-progress--${variant}`,\n className\n )}\n {...props}\n >\n {isIndeterminate ? (\n /* Hardware-Accelerated Indeterminate Bar /\n <div className=\"nui-progress-indicator nui-progress-indicator--indeterminate\" />\n ) : (\n / Hardware-Accelerated Determinate Bar */\n <div\n className=\"nui-progress-indicator\"\n style={{\n // We use translateX instead of width for buttery smooth 60fps rendering\n transform: `translateX(-${100 - percentage}%)`,\n }}\n />\n )}\n </div>\n );\n});\n\nProgress.displayName = 'Progress';"],"names":["Progress","forwardRef","value","max","indeterminate","size","variant","label","className","props","ref","isIndeterminate","safeValue","percentage","jsx","cn"],"mappings":";;;;AAiCO,MAAMA,IAAWC,EAA0C,CAAC;AAAA,EACjE,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAAQ;AAET,QAAMC,IAAkBP,KAAiBF,MAAU,QAG7CU,IAAY,KAAK,IAAI,KAAK,IAAIV,KAAS,GAAG,CAAC,GAAGC,CAAG,GACjDU,IAAcD,IAAYT,IAAO;AAEvC,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAeP;AAAA,MACf,iBAAeQ,IAAkB,SAAYC;AAAA,MAC7C,cAAYL;AAAA,MACZ,WAAWQ;AAAA,QACT;AAAA,QACA,iBAAiBV,CAAI;AAAA,QACrB,iBAAiBC,CAAO;AAAA,QACxBE;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAE;AAAA;AAAA,QAEC,gBAAAG,EAAC,OAAA,EAAI,WAAU,+DAAA,CAA+D;AAAA;AAAA;AAAA,QAG9E,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA;AAAA,cAEL,WAAW,eAAe,MAAMD,CAAU;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA;AAAA;AAAA,IACF;AAAA,EAAA;AAIR,CAAC;AAEDb,EAAS,cAAc;"}

package/dist/components/radiogroup/RadioGroup.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react");;/* empty css                 */function p({options:l,value:d,defaultValue:m,onChange:o,name:k,disabled:b=!1,className:x=""}){const c=d!==void 0,[v,w]=u.useState(m),R=c?d:v,f=u.useRef([]),h=u.useCallback(e=>{c||w(e),o?.(e)},[c,o]),j=(e,n)=>{const a=l.map((i,y)=>i.disabled?null:y).filter(i=>i!==null),r=a.indexOf(n);if(r===-1)return;let t=r;switch(e.key){case"ArrowDown":case"ArrowRight":t=(r+1)%a.length;break;case"ArrowUp":case"ArrowLeft":t=(r-1+a.length)%a.length;break;case"Home":t=0;break;case"End":t=a.length-1;break;default:return}e.preventDefault();const g=a[t];f.current[g]?.focus(),h(l[g].value)};return s.jsx("div",{className:`ui-radio-group ${x}`,role:"radiogroup",children:l.map((e,n)=>{const a=R===e.value;return s.jsxs("label",{className:"ui-radio-item","aria-disabled":b||e.disabled,children:[s.jsx("input",{ref:r=>{f.current[n]=r},type:"radio",className:"ui-radio-input",name:k,value:e.value,disabled:b||e.disabled,checked:a,onChange:()=>h(e.value),onKeyDown:r=>j(r,n),"data-state":a?"checked":"unchecked"}),s.jsx("span",{className:"ui-radio-label",children:e.label})]},e.value)})})}exports.RadioGroup=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),o=require("react");;/* empty css                 */const g=require("../../utils/cn/cn.cjs"),h=o.createContext(null);function v(){const e=o.useContext(h);if(!e)throw new Error("RadioGroup.Item must be used within a <RadioGroup>");return e}const G=o.forwardRef(({value:e,defaultValue:u,onChange:r,name:s,disabled:d=!1,orientation:n="vertical",className:t,children:c,...i},l)=>{const a=e!==void 0,[p,b]=o.useState(u),f=a?e:p,x=o.useId(),C=s||`nui-radiogroup-${x}`,j=o.useCallback(R=>{a||b(R),r?.(R)},[a,r]);return m.jsx(h.Provider,{value:{value:f,onChange:j,name:C,disabled:d},children:m.jsx("div",{ref:l,role:"radiogroup","aria-orientation":n,className:g.cn("nui-radio-group",n==="horizontal"&&"nui-radio-group--horizontal",t),...i,children:c})})});G.displayName="RadioGroup";const I=o.forwardRef(({value:e,disabled:u,className:r,id:s,...d},n)=>{const t=v(),c=t.disabled||u,i=t.value===e,l=o.useId(),a=s||`nui-radio-${l}`;return m.jsx("input",{ref:n,id:a,type:"radio",name:t.name,value:e,checked:i,disabled:c,"aria-checked":i,onChange:p=>t.onChange(p.target.value),className:g.cn("nui-radio-input",r),...d})});I.displayName="RadioGroup.Item";const w=Object.assign(G,{Item:I});exports.RadioGroup=w;
 //# sourceMappingURL=RadioGroup.cjs.map