@nofinite/nui 1.1.1 → 2.0.1

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

@@ -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;"}
+{"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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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;"}
+{"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

@@ -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