luan-ui 0.5.2 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"/","sources":["components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { mergeRefs } from \"@utilities/merge-refs/merge-refs\";\nimport { getTruncatedElements } from \"@utilities/pagination/get-truncated-elements\";\nimport { handleKeyboardNavigation } from \"@utilities/pagination/keyboard-navigation\";\nimport clsx from \"clsx\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\ttype PropsWithChildren,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\n/**\n * Pagination Context\n */\n\ntype PaginationContextValue = {\n\tpage: number;\n\ttotalPages: number;\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tsetPage: (page: number) => void;\n\tregisterRef: (index: number, element: HTMLButtonElement | null) => void;\n};\n\nconst PaginationContext = createContext<PaginationContextValue | undefined>(\n\tundefined,\n);\n\nconst usePaginationContext = () => {\n\tconst context = useContext(PaginationContext);\n\tif (!context) {\n\t\tthrow new Error(\"Pagination components must be used within a Pagination\");\n\t}\n\treturn context;\n};\n\n/**\n * Pagination\n */\n\nexport type PaginationProps = {\n\tchildren?: React.ReactNode;\n\tpage: number;\n\ttotalPages: number;\n\tonPageChange: (page: number) => void;\n\tasChild?: boolean;\n} & React.HTMLAttributes<HTMLElement>;\n\n/**\n * Pagination component that provides navigation controls for a set of pages.\n *\n * @param {number} props.page - The current active page number\n * @param {number} props.totalPages - The total number of pages\n * @param {(page: number) => void} props.onPageChange - Callback function called when page changes\n * @param {boolean} [props.asChild] - Whether to render the root element as a child component\n * @param {React.ReactNode} [props.children] - The content to render within the pagination component\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * ```tsx\n * <Pagination page={1} totalPages={10} onPageChange={(page) => console.log(page)}>\n *   <PaginationPrev>Previous</PaginationPrev>\n *   <PaginationItem index={1}>1</PaginationItem>\n *   <PaginationItem index={2}>2</PaginationItem>\n *   <PaginationNext>Next</PaginationNext>\n * </Pagination>\n * ```\n */\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tpage: initialPage,\n\t\t\ttotalPages: initialTotalPages,\n\t\t\tonPageChange,\n\t\t\tclassName,\n\t\t\tasChild,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [page, setPage] = useState(initialPage);\n\t\tconst [totalPages, setTotalPages] = useState(initialTotalPages);\n\t\tconst [hasNextPage, setHasNextPage] = useState(page < totalPages);\n\t\tconst [hasPreviousPage, setHasPreviousPage] = useState(page > 1);\n\n\t\tconst refs = useRef(new Map<number, HTMLButtonElement>());\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(e: KeyboardEvent) =>\n\t\t\t\thandleKeyboardNavigation(e, { current: refs.current }, totalPages),\n\t\t\t[totalPages],\n\t\t);\n\n\t\tconst registerRefWrapper = useCallback(\n\t\t\t(index: number, element: HTMLButtonElement | null) => {\n\t\t\t\tif (element) {\n\t\t\t\t\trefs.current.set(index, element);\n\t\t\t\t} else {\n\t\t\t\t\trefs.current.delete(index);\n\t\t\t\t}\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\t};\n\t\t}, [handleKeyDown]);\n\n\t\tuseEffect(() => {\n\t\t\tsetHasNextPage(page < totalPages);\n\t\t\tsetHasPreviousPage(page > 1);\n\t\t}, [page, totalPages]);\n\n\t\tuseEffect(() => {\n\t\t\tsetPage(initialPage);\n\t\t\tsetTotalPages(initialTotalPages);\n\t\t}, [initialPage, initialTotalPages]);\n\n\t\tuseEffect(() => {\n\t\t\tif (onPageChange) {\n\t\t\t\tonPageChange(page);\n\t\t\t}\n\t\t}, [page, onPageChange]);\n\n\t\tconst memoContextValue = useMemo(\n\t\t\t() => ({\n\t\t\t\tpage,\n\t\t\t\tsetPage,\n\t\t\t\ttotalPages,\n\t\t\t\thasNextPage,\n\t\t\t\thasPreviousPage,\n\t\t\t\tregisterRef: registerRefWrapper,\n\t\t\t}),\n\t\t\t[page, totalPages, hasNextPage, hasPreviousPage, registerRefWrapper],\n\t\t);\n\n\t\tconst Component = asChild ? Slot : \"nav\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\taria-label=\"Pagination\"\n\t\t\t\tclassName={clsx(\"flex items-center gap-1\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<PaginationContext.Provider value={memoContextValue}>\n\t\t\t\t\t{getTruncatedElements({ page, children })}\n\t\t\t\t</PaginationContext.Provider>\n\t\t\t</Component>\n\t\t);\n\t},\n);\n\n/**\n * Pagination Item\n */\n\nexport type PaginationItemProps = {\n\tchildren?: React.ReactNode;\n\tindex?: number;\n} & React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * Individual page item within the Pagination component.\n *\n * @example\n * ```tsx\n * <PaginationItem index={1}>1</PaginationItem>\n */\nconst PaginationItem = forwardRef<HTMLButtonElement, PaginationItemProps>(\n\t({ index, children, className, ...props }, ref) => {\n\t\tconst { registerRef, page, setPage } = usePaginationContext();\n\n\t\tconst isActive = page === index;\n\t\tconst handleClick = () => {\n\t\t\tif (index !== undefined) {\n\t\t\t\tsetPage(index);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\tref={mergeRefs(ref, (el) => registerRef(index ?? 0, el))}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-gray-700 text-white hover:bg-gray-800\": isActive,\n\t\t\t\t\t},\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\taria-current={isActive ? \"page\" : undefined}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children ?? index}\n\t\t\t</button>\n\t\t);\n\t},\n);\n\n/**\n * Pagination Prev\n */\n\n/**\n * Previous page button component for the Pagination.\n * Automatically disabled when on the first page.\n *\n * @example\n * ```tsx\n * <PaginationPrev>Previous</PaginationPrev>\n * ```\n */\nconst PaginationPrev = forwardRef<\n\tHTMLButtonElement,\n\tPropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>\n>(({ children, className, ...props }, ref) => {\n\tconst { registerRef, page, setPage, hasPreviousPage } =\n\t\tusePaginationContext();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => setPage(page - 1)}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(0, el))}\n\t\t\tdisabled={!hasPreviousPage}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n});\n\n/**\n * Pagination Next\n */\n\n/**\n * Next page button component for the Pagination.\n * Automatically disabled when on the last page.\n *\n * @example\n * ```tsx\n * <PaginationNext>Next</PaginationNext>\n * ```\n */\nconst PaginationNext = forwardRef<\n\tHTMLButtonElement,\n\tPropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>\n>(({ children, className, ...props }, ref) => {\n\tconst { page, setPage, hasNextPage, registerRef, totalPages } =\n\t\tusePaginationContext();\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={() => setPage(page + 1)}\n\t\t\tdisabled={!hasNextPage}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(totalPages + 1, el))}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n});\n\nexport { Pagination, PaginationItem, PaginationPrev, PaginationNext };\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"/","sources":["components/pagination/pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACN,aAAa,EAGb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AAef,MAAM,iBAAiB,GAAG,aAAa,CACtC,SAAS,CACT,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,UAAU,CAAC,EACnB,QAAQ,EACR,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,iBAAiB,EAC7B,YAAY,EACZ,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACS;IACjB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAEjE,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,EAA6B,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,WAAW,CAChC,CAAC,CAAgB,EAAE,EAAE,CACpB,wBAAwB,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,CAAC,EACnE,CAAC,UAAU,CAAC,CACZ,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACrC,CAAC,KAAa,EAAE,OAAiC,EAAE,EAAE;QACpD,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC,EACD,EAAE,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACxD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACd,cAAc,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;QAClC,kBAAkB,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,WAAW,CAAC,CAAC;QACrB,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,YAAY,EAAE,CAAC;YAClB,YAAY,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;IACF,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,gBAAgB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC;QACN,IAAI;QACJ,OAAO;QACP,UAAU;QACV,WAAW;QACX,eAAe;QACf,WAAW,EAAE,kBAAkB;KAC/B,CAAC,EACF,CAAC,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,kBAAkB,CAAC,CACpE,CAAC;IAEF,MAAM,YAAY,GAAkC;QACnD,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC;QACrD,QAAQ,EAAE,CACT,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YACjD,oBAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,GACb,CAC7B;KACD,CAAC;IAEF,OAAO,SAAS,CAAC;QAChB,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,YAAY,EAAE,KAAK,CAAC;KAC7C,CAAC,CAAC;AACJ,CAAC;AAYD;;;;;;GAMG;AACH,SAAS,cAAc,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE9D,MAAM,QAAQ,GAAG,IAAI,KAAK,KAAK,CAAC;IAChC,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,iBACC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EACxD,SAAS,EAAE,EAAE,CACZ,2EAA2E,EAC3E;YACC,0CAA0C,EAAE,QAAQ;SACpD,EACD,SAAS,CACT,kBACa,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACvC,KAAK,YAER,QAAQ,IAAI,KAAK,GACV,CACT,CAAC;AACH,CAAC;AAYD;;;;;;;;GAQG;AACH,SAAS,cAAc,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,GACpD,oBAAoB,EAAE,CAAC;IAExB,OAAO,CACN,iBACC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,EAChC,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAC/C,QAAQ,EAAE,CAAC,eAAe,EAC1B,SAAS,EAAE,EAAE,CACZ,+FAA+F,EAC/F,SAAS,CACT,KACG,KAAK,YAER,QAAQ,GACD,CACT,CAAC;AACH,CAAC;AAYD;;;;;;;;GAQG;AACH,SAAS,cAAc,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACa;IACrB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,GAC5D,oBAAoB,EAAE,CAAC;IACxB,OAAO,CACN,iBACC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACZ,+FAA+F,EAC/F,SAAS,CACT,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,EAChC,QAAQ,EAAE,CAAC,WAAW,EACtB,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,UAAU,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KACxD,KAAK,YAER,QAAQ,GACD,CACT,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { mergeRefs } from \"@utilities/merge-refs/merge-refs\";\nimport { getTruncatedElements } from \"@utilities/pagination/get-truncated-elements\";\nimport { handleKeyboardNavigation } from \"@utilities/pagination/keyboard-navigation\";\nimport clsx from \"clsx\";\nimport {\n\tcreateContext,\n\ttype PropsWithChildren,\n\ttype Ref,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\n/**\n * Pagination Context\n */\n\ntype PaginationContextValue = {\n\tpage: number;\n\ttotalPages: number;\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tsetPage: (page: number) => void;\n\tregisterRef: (index: number, element: HTMLButtonElement | null) => void;\n};\n\nconst PaginationContext = createContext<PaginationContextValue | undefined>(\n\tundefined,\n);\n\nconst usePaginationContext = () => {\n\tconst context = useContext(PaginationContext);\n\tif (!context) {\n\t\tthrow new Error(\"Pagination components must be used within a Pagination\");\n\t}\n\treturn context;\n};\n\n/**\n * Pagination\n */\n\nexport type PaginationProps = useRender.ComponentProps<\"nav\"> & {\n\tchildren?: React.ReactNode;\n\tpage: number;\n\ttotalPages: number;\n\tonPageChange: (page: number) => void;\n\tclassName?: string;\n};\n\n/**\n * Pagination component that provides navigation controls for a set of pages.\n *\n * @param {number} props.page - The current active page number\n * @param {number} props.totalPages - The total number of pages\n * @param {(page: number) => void} props.onPageChange - Callback function called when page changes\n * @param {React.ReactElement | ((props, state) => React.ReactElement)} [props.render] - Custom element to render instead of nav\n * @param {React.ReactNode} [props.children] - The content to render within the pagination component\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * ```tsx\n * <Pagination page={1} totalPages={10} onPageChange={(page) => console.log(page)}>\n *   <PaginationPrev>Previous</PaginationPrev>\n *   <PaginationItem index={1}>1</PaginationItem>\n *   <PaginationItem index={2}>2</PaginationItem>\n *   <PaginationNext>Next</PaginationNext>\n * </Pagination>\n * ```\n *\n * @example\n * // With render prop to change the element\n * ```tsx\n * <Pagination render={<div />} page={1} totalPages={10} onPageChange={handleChange}>\n *   ...\n * </Pagination>\n * ```\n */\nfunction Pagination({\n\tchildren,\n\tpage: initialPage,\n\ttotalPages: initialTotalPages,\n\tonPageChange,\n\tclassName,\n\trender,\n\t...props\n}: PaginationProps) {\n\tconst [page, setPage] = useState(initialPage);\n\tconst [totalPages, setTotalPages] = useState(initialTotalPages);\n\tconst [hasNextPage, setHasNextPage] = useState(page < totalPages);\n\tconst [hasPreviousPage, setHasPreviousPage] = useState(page > 1);\n\n\tconst refs = useRef(new Map<number, HTMLButtonElement>());\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: KeyboardEvent) =>\n\t\t\thandleKeyboardNavigation(e, { current: refs.current }, totalPages),\n\t\t[totalPages],\n\t);\n\n\tconst registerRefWrapper = useCallback(\n\t\t(index: number, element: HTMLButtonElement | null) => {\n\t\t\tif (element) {\n\t\t\t\trefs.current.set(index, element);\n\t\t\t} else {\n\t\t\t\trefs.current.delete(index);\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [handleKeyDown]);\n\n\tuseEffect(() => {\n\t\tsetHasNextPage(page < totalPages);\n\t\tsetHasPreviousPage(page > 1);\n\t}, [page, totalPages]);\n\n\tuseEffect(() => {\n\t\tsetPage(initialPage);\n\t\tsetTotalPages(initialTotalPages);\n\t}, [initialPage, initialTotalPages]);\n\n\tuseEffect(() => {\n\t\tif (onPageChange) {\n\t\t\tonPageChange(page);\n\t\t}\n\t}, [page, onPageChange]);\n\n\tconst memoContextValue = useMemo(\n\t\t() => ({\n\t\t\tpage,\n\t\t\tsetPage,\n\t\t\ttotalPages,\n\t\t\thasNextPage,\n\t\t\thasPreviousPage,\n\t\t\tregisterRef: registerRefWrapper,\n\t\t}),\n\t\t[page, totalPages, hasNextPage, hasPreviousPage, registerRefWrapper],\n\t);\n\n\tconst defaultProps: useRender.ElementProps<\"nav\"> = {\n\t\t\"aria-label\": \"Pagination\",\n\t\tclassName: clsx(\"flex items-center gap-1\", className),\n\t\tchildren: (\n\t\t\t<PaginationContext.Provider value={memoContextValue}>\n\t\t\t\t{getTruncatedElements({ page, children })}\n\t\t\t</PaginationContext.Provider>\n\t\t),\n\t};\n\n\treturn useRender({\n\t\tdefaultTagName: \"nav\",\n\t\trender,\n\t\tprops: mergeProps<\"nav\">(defaultProps, props),\n\t});\n}\n\n/**\n * Pagination Item\n */\n\nexport type PaginationItemProps = {\n\tchildren?: React.ReactNode;\n\tindex?: number;\n\tref?: Ref<HTMLButtonElement>;\n} & React.HTMLAttributes<HTMLButtonElement>;\n\n/**\n * Individual page item within the Pagination component.\n *\n * @example\n * ```tsx\n * <PaginationItem index={1}>1</PaginationItem>\n */\nfunction PaginationItem({\n\tindex,\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationItemProps) {\n\tconst { registerRef, page, setPage } = usePaginationContext();\n\n\tconst isActive = page === index;\n\tconst handleClick = () => {\n\t\tif (index !== undefined) {\n\t\t\tsetPage(index);\n\t\t}\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleClick}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(index ?? 0, el))}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200\",\n\t\t\t\t{\n\t\t\t\t\t\"bg-gray-700 text-white hover:bg-gray-800\": isActive,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-current={isActive ? \"page\" : undefined}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? index}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Prev\n */\n\nexport type PaginationPrevProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Previous page button component for the Pagination.\n * Automatically disabled when on the first page.\n *\n * @example\n * ```tsx\n * <PaginationPrev>Previous</PaginationPrev>\n * ```\n */\nfunction PaginationPrev({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationPrevProps) {\n\tconst { registerRef, page, setPage, hasPreviousPage } =\n\t\tusePaginationContext();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={() => setPage(page - 1)}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(0, el))}\n\t\t\tdisabled={!hasPreviousPage}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\n/**\n * Pagination Next\n */\n\nexport type PaginationNextProps = PropsWithChildren<\n\tReact.HTMLAttributes<HTMLButtonElement>\n> & {\n\tref?: Ref<HTMLButtonElement>;\n};\n\n/**\n * Next page button component for the Pagination.\n * Automatically disabled when on the last page.\n *\n * @example\n * ```tsx\n * <PaginationNext>Next</PaginationNext>\n * ```\n */\nfunction PaginationNext({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: PaginationNextProps) {\n\tconst { page, setPage, hasNextPage, registerRef, totalPages } =\n\t\tusePaginationContext();\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={() => setPage(page + 1)}\n\t\t\tdisabled={!hasNextPage}\n\t\t\tref={mergeRefs(ref, (el) => registerRef(totalPages + 1, el))}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\nexport { Pagination, PaginationItem, PaginationPrev, PaginationNext };\n"]}

package/dist/components/popover/popover.d.ts

@@ -1,4 +1,5 @@
-import { Popover as RadixPopover } from "radix-ui";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
 /**
  * Popover
  */
@@ -6,14 +7,18 @@ export type PopoverProps = {
     showArrow?: boolean;
     closeButtonAriaLabel?: string;
     showCloseButton?: boolean;
-} & RadixPopover.PopoverProps & Pick<RadixPopover.PopoverContentProps, "side">;
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    children?: React.ReactNode;
+} & ComponentProps<typeof PopoverPrimitive.Root>;
 /**
  * Popover component that provides a popover container with a trigger and content.
  *
  * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger
  * @param {string} [props.closeButtonAriaLabel="Close"] - Aria label for the close button
  * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
- * @param {RadixPopover.PopoverContentProps["side"]} [props.side] - The preferred side to show the popover
+ * @param {"top" | "right" | "bottom" | "left"} [props.side] - The preferred side to show the popover
+ * @param {number} [props.sideOffset=4] - The offset from the trigger
  *
  * @example
  * ```tsx
@@ -25,11 +30,13 @@ export type PopoverProps = {
  * </Popover>
  * ```
  */
-declare const Popover: ({ children, showArrow, closeButtonAriaLabel, showCloseButton, side, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
-declare const PopoverTrigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopoverContentProps = RadixPopover.PopoverContentProps & {
+declare function Popover({ children, showArrow, closeButtonAriaLabel, showCloseButton, side, sideOffset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;
+declare function PopoverTrigger({ className, ref, ...props }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Popup> & {
     showArrow?: boolean;
     closeButtonAriaLabel?: string;
+    sideOffset?: number;
 };
 /**
  * Popover Content
@@ -45,20 +52,29 @@ export type PopoverContentProps = RadixPopover.PopoverContentProps & {
  * </PopoverContent>
  * ```
  */
-declare const PopoverContent: import("react").ForwardRefExoticComponent<RadixPopover.PopoverContentProps & {
-    showArrow?: boolean;
-    closeButtonAriaLabel?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare function PopoverContent({ children, className, sideOffset: sideOffsetProp, ref, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Popover Close
  */
-declare const PopoverClose: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>;
+declare function PopoverClose({ className, ref, ...props }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Popover Portal
  */
-declare const PopoverPortal: import("react").FC<RadixPopover.PopoverPortalProps>;
+declare const PopoverPortal: import("react").ForwardRefExoticComponent<import("@base-ui/react/popover").PopoverPortalProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Popover Anchor
  */
-declare const PopoverAnchor: import("react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, };
+export type PopoverAnchorProps = ComponentProps<typeof PopoverPrimitive.Positioner> & {
+    children?: React.ReactNode;
+};
+declare function PopoverAnchor({ children, ref, ...props }: PopoverAnchorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Title
+ */
+declare const PopoverTitle: import("react").ForwardRefExoticComponent<import("@base-ui/react/popover").PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+/**
+ * Popover Description
+ */
+declare const PopoverDescription: import("react").ForwardRefExoticComponent<import("@base-ui/react/popover").PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, PopoverTitle, PopoverDescription, };

package/dist/components/popover/popover.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { Icon } from "../icon/icon";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Popover as RadixPopover } from "radix-ui";
-import { createContext, forwardRef, useContext, useMemo, } from "react";
-/**
- * Popover Context
- */
+import { createContext, useContext, useMemo } from "react";
 const PopoverContext = createContext(undefined);
 const usePopoverContext = () => {
     const context = useContext(PopoverContext);
@@ -21,7 +18,8 @@ const usePopoverContext = () => {
  * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger
  * @param {string} [props.closeButtonAriaLabel="Close"] - Aria label for the close button
  * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
- * @param {RadixPopover.PopoverContentProps["side"]} [props.side] - The preferred side to show the popover
+ * @param {"top" | "right" | "bottom" | "left"} [props.side] - The preferred side to show the popover
+ * @param {number} [props.sideOffset=4] - The offset from the trigger
  *
  * @example
  * ```tsx
@@ -33,16 +31,19 @@ const usePopoverContext = () => {
  * </Popover>
  * ```
  */
-const Popover = ({ children, showArrow = true, closeButtonAriaLabel = "Close", showCloseButton = true, side, ...props }) => {
+function Popover({ children, showArrow = true, closeButtonAriaLabel = "Close", showCloseButton = true, side, sideOffset = 10, ...props }) {
     const contextValue = useMemo(() => ({
         showArrow,
         closeButtonAriaLabel,
         side,
         showCloseButton,
-    }), [showArrow, closeButtonAriaLabel, side, showCloseButton]);
-    return (_jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(RadixPopover.Root, { ...props, children: children }) }));
-};
-const PopoverTrigger = RadixPopover.Trigger;
+        sideOffset,
+    }), [showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset]);
+    return (_jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(PopoverPrimitive.Root, { ...props, children: children }) }));
+}
+function PopoverTrigger({ className, ref, ...props }) {
+    return (_jsx(PopoverPrimitive.Trigger, { ref: ref, className: className, ...props }));
+}
 /**
  * Popover Content
  */
@@ -57,21 +58,28 @@ const PopoverTrigger = RadixPopover.Trigger;
  * </PopoverContent>
  * ```
  */
-const PopoverContent = forwardRef(({ children, className, sideOffset = 4, ...props }, ref) => {
-    const { showArrow, closeButtonAriaLabel, side, showCloseButton } = usePopoverContext();
-    return (_jsxs(RadixPopover.Content, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), sideOffset: sideOffset, side: side, ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(Cross1Icon, {}) }) })), children, showArrow && _jsx(RadixPopover.Arrow, { className: "fill-gray-700" })] }));
-});
+function PopoverContent({ children, className, sideOffset: sideOffsetProp, ref, ...props }) {
+    const { showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset: sideOffsetContext, } = usePopoverContext();
+    const sideOffset = sideOffsetProp ?? sideOffsetContext ?? 10;
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, sideOffset: sideOffset, children: _jsxs(PopoverPrimitive.Popup, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { render: _jsx(Cross1Icon, {}), size: "small" }) })), children, showArrow && (_jsx(PopoverPrimitive.Arrow, { className: "data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25", children: _jsx("div", { className: "h-2.5 w-2.5 rotate-45 bg-gray-700" }) }))] }) }) }));
+}
+function PopoverClose({ className, ref, ...props }) {
+    return _jsx(PopoverPrimitive.Close, { ref: ref, className: className, ...props });
+}
 /**
- * Popover Close
+ * Popover Portal
  */
-const PopoverClose = RadixPopover.Close;
+const PopoverPortal = PopoverPrimitive.Portal;
+function PopoverAnchor({ children, ref, ...props }) {
+    return (_jsx(PopoverPrimitive.Positioner, { ref: ref, ...props, children: children }));
+}
 /**
- * Popover Portal
+ * Popover Title
  */
-const PopoverPortal = RadixPopover.Portal;
+const PopoverTitle = PopoverPrimitive.Title;
 /**
- * Popover Anchor
+ * Popover Description
  */
-const PopoverAnchor = RadixPopover.Anchor;
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, };
+const PopoverDescription = PopoverPrimitive.Description;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, PopoverTitle, PopoverDescription, };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAEN,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,GACP,MAAM,OAAO,CAAC;AAEf;;GAEG;AAEH,MAAM,cAAc,GAAG,aAAa,CAA2B,SAAS,CAAC,CAAC;AAE1E,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAaF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,GAAG,CAAC,EAChB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,oBAAoB,GAAG,OAAO,EAC9B,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACN,SAAS;QACT,oBAAoB;QACpB,IAAI;QACJ,eAAe;KACf,CAAC,EACF,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,CAAC,CACxD,CAAC;IACF,OAAO,CACN,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,KAAC,YAAY,CAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAqB,GACnC,CAC1B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC;AAO5C;;GAEG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,EAAE,GAC/D,iBAAiB,EAAE,CAAC;IACrB,OAAO,CACN,MAAC,YAAY,CAAC,OAAO,IACpB,SAAS,EAAE,EAAE,CACZ,sFAAsF,EACtF,SAAS,CACT,EACD,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,KACN,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,eAAe,IAAI,CACnB,KAAC,YAAY,IACZ,SAAS,EAAC,wBAAwB,gBACtB,oBAAoB,YAEhC,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,UAAU,KAAG,GACR,GACO,CACf,EACA,QAAQ,EACR,SAAS,IAAI,KAAC,YAAY,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,GAAG,IACxC,CACvB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH;;GAEG;AAEH,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC;AAExC;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,GACb,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport {\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\n\n/**\n * Popover Context\n */\n\nconst PopoverContext = createContext<PopoverProps | undefined>(undefined);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n} & RadixPopover.PopoverProps &\n\tPick<RadixPopover.PopoverContentProps, \"side\">;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {RadixPopover.PopoverContentProps[\"side\"]} [props.side] - The preferred side to show the popover\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\t...props\n}: PopoverProps) => {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<RadixPopover.Root {...props}>{children}</RadixPopover.Root>\n\t\t</PopoverContext.Provider>\n\t);\n};\n\nconst PopoverTrigger = RadixPopover.Trigger;\n\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n};\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof RadixPopover.Content>,\n\tPopoverContentProps\n>(({ children, className, sideOffset = 4, ...props }, ref) => {\n\tconst { showArrow, closeButtonAriaLabel, side, showCloseButton } =\n\t\tusePopoverContext();\n\treturn (\n\t\t<RadixPopover.Content\n\t\t\tclassName={cn(\n\t\t\t\t\"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tsideOffset={sideOffset}\n\t\t\tside={side}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{showCloseButton && (\n\t\t\t\t<PopoverClose\n\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t>\n\t\t\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t\t\t<Cross1Icon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</PopoverClose>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{showArrow && <RadixPopover.Arrow className=\"fill-gray-700\" />}\n\t\t</RadixPopover.Content>\n\t);\n});\n\n/**\n * Popover Close\n */\n\nconst PopoverClose = RadixPopover.Close;\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = RadixPopover.Portal;\n\n/**\n * Popover Anchor\n */\n\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n};\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\n/**\n * Popover Context\n */\n\ntype PopoverContextValue = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\tsideOffset?: number;\n};\n\nconst PopoverContext = createContext<PopoverContextValue | undefined>(\n\tundefined,\n);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\tsideOffset?: number;\n\tchildren?: React.ReactNode;\n} & ComponentProps<typeof PopoverPrimitive.Root>;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {\"top\" | \"right\" | \"bottom\" | \"left\"} [props.side] - The preferred side to show the popover\n * @param {number} [props.sideOffset=4] - The offset from the trigger\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nfunction Popover({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\tsideOffset = 10,\n\t...props\n}: PopoverProps) {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t\tsideOffset,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>\n\t\t</PopoverContext.Provider>\n\t);\n}\n\nexport type PopoverTriggerProps = ComponentProps<\n\ttypeof PopoverPrimitive.Trigger\n>;\n\nfunction PopoverTrigger({ className, ref, ...props }: PopoverTriggerProps) {\n\treturn (\n\t\t<PopoverPrimitive.Trigger ref={ref} className={className} {...props} />\n\t);\n}\n\nexport type PopoverContentProps = ComponentProps<\n\ttypeof PopoverPrimitive.Popup\n> & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tsideOffset?: number;\n};\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nfunction PopoverContent({\n\tchildren,\n\tclassName,\n\tsideOffset: sideOffsetProp,\n\tref,\n\t...props\n}: PopoverContentProps) {\n\tconst {\n\t\tshowArrow,\n\t\tcloseButtonAriaLabel,\n\t\tside,\n\t\tshowCloseButton,\n\t\tsideOffset: sideOffsetContext,\n\t} = usePopoverContext();\n\tconst sideOffset = sideOffsetProp ?? sideOffsetContext ?? 10;\n\n\treturn (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Positioner side={side} sideOffset={sideOffset}>\n\t\t\t\t<PopoverPrimitive.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t>\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<PopoverClose\n\t\t\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon render={<Cross1Icon />} size=\"small\" />\n\t\t\t\t\t\t</PopoverClose>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t\t{showArrow && (\n\t\t\t\t\t\t<PopoverPrimitive.Arrow className=\"data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25\">\n\t\t\t\t\t\t\t<div className=\"h-2.5 w-2.5 rotate-45 bg-gray-700\" />\n\t\t\t\t\t\t</PopoverPrimitive.Arrow>\n\t\t\t\t\t)}\n\t\t\t\t</PopoverPrimitive.Popup>\n\t\t\t</PopoverPrimitive.Positioner>\n\t\t</PopoverPrimitive.Portal>\n\t);\n}\n\n/**\n * Popover Close\n */\n\nexport type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>;\n\nfunction PopoverClose({ className, ref, ...props }: PopoverCloseProps) {\n\treturn <PopoverPrimitive.Close ref={ref} className={className} {...props} />;\n}\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\n/**\n * Popover Anchor\n */\n\nexport type PopoverAnchorProps = ComponentProps<\n\ttypeof PopoverPrimitive.Positioner\n> & {\n\tchildren?: React.ReactNode;\n};\n\nfunction PopoverAnchor({ children, ref, ...props }: PopoverAnchorProps) {\n\treturn (\n\t\t<PopoverPrimitive.Positioner ref={ref} {...props}>\n\t\t\t{children}\n\t\t</PopoverPrimitive.Positioner>\n\t);\n}\n\n/**\n * Popover Title\n */\n\nconst PopoverTitle = PopoverPrimitive.Title;\n\n/**\n * Popover Description\n */\n\nconst PopoverDescription = PopoverPrimitive.Description;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n\tPopoverTitle,\n\tPopoverDescription,\n};\n"]}

package/dist/components/progress/progress.d.ts

@@ -1,6 +1,6 @@
-import { Progress as ProgressPrimitive } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
-export type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import type { ComponentProps } from "react";
+export type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> & {
     showLabel?: boolean;
 };
 /**
@@ -11,7 +11,5 @@ export type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Ro
  * @param {number} props.value - The value of the progress bar.
  * @param {boolean} props.showLabel - Whether to show the label.
  */
-declare const Progress: import("react").ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    showLabel?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare function Progress({ className, value, showLabel, max, ref, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
 export { Progress };

package/dist/components/progress/progress.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { cn } from "../../utilities/cn/cn";
-import { Progress as ProgressPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
 /**
  * A progress bar component that displays a progress indicator and a label.
  *
@@ -10,9 +9,8 @@ import { forwardRef, } from "react";
  * @param {number} props.value - The value of the progress bar.
  * @param {boolean} props.showLabel - Whether to show the label.
  */
-const Progress = forwardRef(({ className, value, showLabel = true, max = 100, ...props }, ref) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ProgressPrimitive.Root, { className: cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80", className), max: max, ...props, ref: ref, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-gray-700/80 transition-all", style: {
-                    transform: `translateX(-${100 - ((value || 0) / max) * 100}%)`,
-                } }) }), showLabel && _jsxs("div", { className: "text-gray-500 text-sm", children: [value, "%"] })] })));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+function Progress({ className, value, showLabel = true, max = 100, ref, ...props }) {
+    return (_jsxs(ProgressPrimitive.Root, { className: "flex items-center gap-4", value: value, max: max, ref: ref, ...props, children: [_jsx(ProgressPrimitive.Track, { className: cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80", className), children: _jsx(ProgressPrimitive.Indicator, { className: "h-full bg-gray-700/80 transition-all" }) }), showLabel && (_jsx(ProgressPrimitive.Value, { className: "text-gray-500 text-sm", children: (_formattedValue, rawValue) => `${rawValue}%` }))] }));
+}
 export { Progress };
 //# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"/","sources":["components/progress/progress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAQf;;;;;;;GAOG;AAEH,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvE,eAAK,SAAS,EAAC,yBAAyB,aACvC,KAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAE,EAAE,CACZ,iEAAiE,EACjE,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,iBAAiB,CAAC,SAAS,IAC3B,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE;oBACN,SAAS,EAAE,eAAe,GAAG,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI;iBAC9D,GACA,GACsB,EACxB,SAAS,IAAI,eAAK,SAAS,EAAC,uBAAuB,aAAE,KAAK,SAAQ,IAC9D,CACN,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nexport type ProgressProps = ComponentPropsWithoutRef<\n\ttypeof ProgressPrimitive.Root\n> & {\n\tshowLabel?: boolean;\n};\n\n/**\n * A progress bar component that displays a progress indicator and a label.\n *\n * @param {Object} props - The component props.\n * @param {string} props.className - The class name for the component.\n * @param {number} props.value - The value of the progress bar.\n * @param {boolean} props.showLabel - Whether to show the label.\n */\n\nconst Progress = forwardRef<\n\tComponentRef<typeof ProgressPrimitive.Root>,\n\tProgressProps\n>(({ className, value, showLabel = true, max = 100, ...props }, ref) => (\n\t<div className=\"flex items-center gap-4\">\n\t\t<ProgressPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\t\"relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tmax={max}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<ProgressPrimitive.Indicator\n\t\t\t\tclassName=\"h-full w-full flex-1 bg-gray-700/80 transition-all\"\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: `translateX(-${100 - ((value || 0) / max) * 100}%)`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</ProgressPrimitive.Root>\n\t\t{showLabel && <div className=\"text-gray-500 text-sm\">{value}%</div>}\n\t</div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n"]}
+{"version":3,"file":"progress.js","sourceRoot":"/","sources":["components/progress/progress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;GAOG;AAEH,SAAS,QAAQ,CAAC,EACjB,SAAS,EACT,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,GAAG,GAAG,GAAG,EACT,GAAG,EACH,GAAG,KAAK,EACO;IACf,OAAO,CACN,MAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,KAAK,aAET,KAAC,iBAAiB,CAAC,KAAK,IACvB,SAAS,EAAE,EAAE,CACZ,iEAAiE,EACjE,SAAS,CACT,YAED,KAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAC,sCAAsC,GAAG,GACvD,EACzB,SAAS,IAAI,CACb,KAAC,iBAAiB,CAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,YACxD,CAAC,eAA8B,EAAE,QAAuB,EAAE,EAAE,CAC5D,GAAG,QAAQ,GAAG,GAEU,CAC1B,IACuB,CACzB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> & {\n\tshowLabel?: boolean;\n};\n\n/**\n * A progress bar component that displays a progress indicator and a label.\n *\n * @param {Object} props - The component props.\n * @param {string} props.className - The class name for the component.\n * @param {number} props.value - The value of the progress bar.\n * @param {boolean} props.showLabel - Whether to show the label.\n */\n\nfunction Progress({\n\tclassName,\n\tvalue,\n\tshowLabel = true,\n\tmax = 100,\n\tref,\n\t...props\n}: ProgressProps) {\n\treturn (\n\t\t<ProgressPrimitive.Root\n\t\t\tclassName=\"flex items-center gap-4\"\n\t\t\tvalue={value}\n\t\t\tmax={max}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ProgressPrimitive.Track\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ProgressPrimitive.Indicator className=\"h-full bg-gray-700/80 transition-all\" />\n\t\t\t</ProgressPrimitive.Track>\n\t\t\t{showLabel && (\n\t\t\t\t<ProgressPrimitive.Value className=\"text-gray-500 text-sm\">\n\t\t\t\t\t{(_formattedValue: string | null, rawValue: number | null) =>\n\t\t\t\t\t\t`${rawValue}%`\n\t\t\t\t\t}\n\t\t\t\t</ProgressPrimitive.Value>\n\t\t\t)}\n\t\t</ProgressPrimitive.Root>\n\t);\n}\n\nexport { Progress };\n"]}

package/dist/components/radio-group/radio-group.d.ts

@@ -1,4 +1,6 @@
-import { RadioGroup as RadixRadioGroup } from "radix-ui";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ComponentProps } from "react";
 /**
  * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.
  *
@@ -23,11 +25,10 @@ import { RadioGroup as RadixRadioGroup } from "radix-ui";
  * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group
  * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted
  * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair
- * @param {string} [dir] - The reading direction of the radio group
- * @param {string} [orientation] - The orientation of the radio group
- * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa
- * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group
+ * @returns {React.ReactElement} A React component that renders a radio group
  */
-declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const RadioGroupItem: import("react").ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>;
+declare function RadioGroup({ className, disabled: initialDisabled, required: initialRequired, ref, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export type RadioGroupItemProps = ComponentProps<typeof Radio.Root>;
+declare function RadioGroupItem({ className, ref, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/components/radio-group/radio-group.js

@@ -1,44 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { useFormContext } from "../form-field/form-field-context";
 import { cn } from "../../utilities/cn/cn";
-import { RadioGroup as RadixRadioGroup } from "radix-ui";
-import { forwardRef, } from "react";
-/**
- * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.
- *
- * @example
- * ```tsx
- * <RadioGroup defaultValue="option1">
- *   <div>
- *     <RadioGroupItem value="option1" id="option1" />
- *     <label htmlFor="option1">Option 1</label>
- *   </div>
- *   <div>
- *     <RadioGroupItem value="option2" id="option2" />
- *     <label htmlFor="option2">Option 2</label>
- *   </div>
- * </RadioGroup>
- * ```
- *
- * @param {string} [className] - Additional CSS classes to apply to the root element
- * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered
- * @param {string} [value] - The controlled value of the radio item to check
- * @param {function} [onValueChange] - Event handler called when the value changes
- * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group
- * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted
- * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair
- * @param {string} [dir] - The reading direction of the radio group
- * @param {string} [orientation] - The orientation of the radio group
- * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa
- * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group
- */
-const RadioGroup = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, ...props }, ref) => {
+function RadioGroup({ className, disabled: initialDisabled, required: initialRequired, ref, ...props }) {
     const { disabled, required } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
     });
-    return (_jsx(RadixRadioGroup.Root, { ref: ref, className: cn("flex flex-col gap-2", className), disabled: disabled, required: required, ...props }));
-});
-const RadioGroupItem = forwardRef(({ className, ...props }, ref) => (_jsx(RadixRadioGroup.Item, { ref: ref, className: cn("flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className), ...props, children: _jsx(RadixRadioGroup.Indicator, { className: "relative h-2 w-2 rounded-full bg-gray-500" }) })));
+    return (_jsx(BaseRadioGroup, { ref: ref, className: cn("flex flex-col gap-2", className), disabled: disabled, required: required, ...props }));
+}
+function RadioGroupItem({ className, ref, ...props }) {
+    return (_jsx(Radio.Root, { ref: ref, className: cn("flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(Radio.Indicator, { className: "relative h-2 w-2 rounded-full bg-gray-500" }) }));
+}
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"/","sources":["components/radio-group/radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,GAAG,UAAU,CAI5B,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,iOAAiO,EACjO,SAAS,CACT,KACG,KAAK,YAET,KAAC,eAAe,CAAC,SAAS,IAAC,SAAS,EAAC,2CAA2C,GAAG,GAC7D,CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\n/**\n * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div>\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <label htmlFor=\"option1\">Option 1</label>\n *   </div>\n *   <div>\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <label htmlFor=\"option2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n *\n * @param {string} [className] - Additional CSS classes to apply to the root element\n * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered\n * @param {string} [value] - The controlled value of the radio item to check\n * @param {function} [onValueChange] - Event handler called when the value changes\n * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group\n * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted\n * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair\n * @param {string} [dir] - The reading direction of the radio group\n * @param {string} [orientation] - The orientation of the radio group\n * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa\n * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group\n */\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof RadixRadioGroup.Root>,\n\tComponentPropsWithoutRef<typeof RadixRadioGroup.Root>\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, required } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t});\n\t\treturn (\n\t\t\t<RadixRadioGroup.Root\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nconst RadioGroupItem = forwardRef<\n\tComponentRef<typeof RadixRadioGroup.Item>,\n\tComponentPropsWithoutRef<typeof RadixRadioGroup.Item>\n>(({ className, ...props }, ref) => (\n\t<RadixRadioGroup.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<RadixRadioGroup.Indicator className=\"relative h-2 w-2 rounded-full bg-gray-500\" />\n\t</RadixRadioGroup.Item>\n));\n\nexport { RadioGroup, RadioGroupItem };\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"/","sources":["components/radio-group/radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAgCtC,SAAS,UAAU,CAAC,EACnB,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,cAAc,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB;IACxE,OAAO,CACN,KAAC,KAAK,CAAC,IAAI,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,6NAA6N,EAC7N,SAAS,CACT,KACG,KAAK,YAET,KAAC,KAAK,CAAC,SAAS,IAAC,SAAS,EAAC,2CAA2C,GAAG,GAC7D,CACb,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div>\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <label htmlFor=\"option1\">Option 1</label>\n *   </div>\n *   <div>\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <label htmlFor=\"option2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n *\n * @param {string} [className] - Additional CSS classes to apply to the root element\n * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered\n * @param {string} [value] - The controlled value of the radio item to check\n * @param {function} [onValueChange] - Event handler called when the value changes\n * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group\n * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted\n * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair\n * @returns {React.ReactElement} A React component that renders a radio group\n */\n\nexport type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>;\n\nfunction RadioGroup({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\tref,\n\t...props\n}: RadioGroupProps) {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<BaseRadioGroup\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof Radio.Root>;\n\nfunction RadioGroupItem({ className, ref, ...props }: RadioGroupItemProps) {\n\treturn (\n\t\t<Radio.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Radio.Indicator className=\"relative h-2 w-2 rounded-full bg-gray-500\" />\n\t\t</Radio.Root>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem };\n"]}

package/dist/components/select/select.d.ts

@@ -1,43 +1,54 @@
-import { Select as SelectPrimitive } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import type { ComponentProps } from "react";
 /**
  * Select
  */
-declare const Select: ({ disabled: initialDisabled, required: initialRequired, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+export type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;
+declare function Select({ disabled: initialDisabled, required: initialRequired, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectGroup
  */
-declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SelectGroup: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * SelectValue
  */
-declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;
+declare function SelectValue({ ref, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectTrigger
  */
-declare const SelectTrigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;
+declare function SelectTrigger({ className, children, ref, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 /**
- * SelectScrollUpButton
+ * SelectScrollUpArrow
  */
-declare const SelectScrollUpButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectScrollUpArrowProps = ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
+declare function SelectScrollUpArrow({ className, ref, ...props }: SelectScrollUpArrowProps): import("react/jsx-runtime").JSX.Element;
 /**
- * SelectScrollDownButton
+ * SelectScrollDownArrow
  */
-declare const SelectScrollDownButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectScrollDownArrowProps = ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
+declare function SelectScrollDownArrow({ className, ref, ...props }: SelectScrollDownArrowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectContent
  */
-declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectContentProps = ComponentProps<typeof SelectPrimitive.Popup> & {
+    sideOffset?: number;
+};
+declare function SelectContent({ className, children, sideOffset, ref, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectLabel
  */
-declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectLabelProps = ComponentProps<typeof SelectPrimitive.GroupLabel>;
+declare function SelectLabel({ className, ref, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectItem
  */
-declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
+declare function SelectItem({ className, children, ref, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectSeparator
  */
-declare const SelectSeparator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export type SelectSeparatorProps = ComponentProps<typeof SelectPrimitive.Separator>;
+declare function SelectSeparator({ className, ref, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, };