@ngrok/mantle 0.63.2 → 0.64.1

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component className={cx(\"text-muted text-sm font-normal\", className)} {...props}>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeftIcon","CaretRightIcon","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","Root","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","Buttons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeftIcon","Separator","CaretRightIcon","defaultPageSizes","PageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","size","PageSizeValue","asChild","Slot","CursorPagination","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}
+{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component className={cx(\"text-muted text-sm font-normal\", className)} {...props}>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst clampedPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(clampedPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"obAEA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,kBAAAC,MAAsB,mCAC/B,OAGC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,YAAAC,MACM,QACP,OAAOC,MAAe,iBA8DlB,cAAAC,EAoDD,QAAAC,MApDC,oBAvCJ,IAAMC,EAA0BC,EAAwD,MAAS,EAiC3FC,EAAOC,EACZ,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,gBAAAC,EAAiB,GAAGC,CAAM,EAAGC,IAAQ,CAC5D,GAAM,CAACC,EAAUC,CAAW,EAAIC,EAAiBL,CAAe,EAEhE,OACCR,EAACE,EAAwB,SAAxB,CAAiC,MAAO,CAAE,gBAAAM,EAAiB,SAAAG,EAAU,YAAAC,CAAY,EACjF,SAAAZ,EAAC,OACA,UAAWc,EAAG,iDAAkDR,CAAS,EACzE,IAAKI,EACJ,GAAGD,EAEH,SAAAF,EACF,EACD,CAEF,CACD,EACAH,EAAK,YAAc,mBAoCnB,IAAMW,EAAUV,EACf,CAAC,CAAE,YAAAW,EAAa,gBAAAC,EAAiB,WAAAC,EAAY,eAAAC,EAAgB,GAAGV,CAAM,EAAGC,IAIvET,EAACmB,EAAA,CAAY,WAAW,QAAQ,IAAKV,EAAM,GAAGD,EAC7C,UAAAT,EAACqB,EAAA,CACA,WAAW,QACX,SAAU,CAACJ,EACX,KAAMjB,EAACsB,EAAA,EAAc,EACrB,MAAM,gBACN,QAASH,EACT,KAAK,KACL,KAAK,SACN,EACAnB,EAACuB,EAAA,CAAU,YAAY,WAAW,UAAU,UAAU,EACtDvB,EAACqB,EAAA,CACA,WAAW,QACX,SAAU,CAACL,EACX,KAAMhB,EAACwB,EAAA,EAAe,EACtB,MAAM,YACN,QAASN,EACT,KAAK,KACL,KAAK,SACN,GACD,CAGH,EACAH,EAAQ,YAAc,gBAEtB,IAAMU,EAAmB,CAAC,EAAG,GAAI,GAAI,GAAI,GAAG,EA0BtCC,EAAiBrB,EACtB,CAAC,CAAE,UAAAC,EAAW,UAAAqB,EAAYF,EAAkB,iBAAAG,EAAkB,GAAGC,CAAK,EAAGnB,IAAQ,CAChF,IAAMoB,EAAMC,EAAW7B,CAAuB,EAE9C,OAAA8B,EAAUF,EAAK,8EAA8E,EAE7FE,EACCL,EAAU,SAASG,EAAI,eAAe,EACtC,qFACD,EAEAE,EACCL,EAAU,SAASG,EAAI,QAAQ,EAC/B,8EACD,EAGC7B,EAACgC,EAAO,KAAP,CACA,aAAc,GAAGH,EAAI,QAAQ,GAC7B,cAAgBI,GAAU,CACzB,IAAIC,EAAc,OAAO,SAASD,EAAO,EAAE,EACvC,OAAO,MAAMC,CAAW,IAC3BA,EAAcL,EAAI,iBAEnBA,EAAI,YAAYK,CAAW,EAC3BP,IAAmBO,CAAW,CAC/B,EAEA,UAAAnC,EAACiC,EAAO,QAAP,CACA,IAAKvB,EACL,UAAWI,EAAG,kBAAmBR,CAAS,EAC1C,MAAOwB,EAAI,SACV,GAAGD,EAEJ,SAAA7B,EAACiC,EAAO,MAAP,EAAa,EACf,EACAjC,EAACiC,EAAO,QAAP,CAAe,MAAM,UACpB,SAAAN,EAAU,IAAKS,GACfnC,EAACgC,EAAO,KAAP,CAAuB,MAAO,GAAGG,CAAI,GACpC,UAAAA,EAAK,cADWA,CAElB,CACA,EACF,GACD,CAEF,CACD,EACAV,EAAe,YAAc,uBAiB7B,SAASW,EAAc,CAAE,QAAAC,EAAU,GAAO,UAAAhC,EAAW,GAAGG,CAAM,EAA6B,CAC1F,IAAMqB,EAAMC,EAAW7B,CAAuB,EAE9C,OAAA8B,EAAUF,EAAK,6EAA6E,EAK3F7B,EAHiBqC,EAAUC,EAAO,OAGjC,CAAU,UAAWzB,EAAG,iCAAkCR,CAAS,EAAI,GAAGG,EACzE,UAAAqB,EAAI,SAAS,aACf,CAEF,CACAO,EAAc,YAAc,sBA0B5B,IAAMG,EAAmB,CAmBxB,KAAApC,EAgBA,QAAAW,EAcA,eAAAW,EAcA,cAAAW,CACD,ECvVA,OAAS,aAAAI,EAAW,YAAAC,MAAgB,QAuFpC,SAASC,EAAoB,CAC5B,SAAAC,EACA,SAAAC,CACD,EAAoD,CACnD,GAAM,CAACC,EAAaC,CAAc,EAAIL,EAAS,CAAC,EAC1C,CAACM,EAAiBC,CAAkB,EAAIP,EAASG,CAAQ,EAG/DJ,EAAU,IAAM,CACfQ,EAAmBJ,CAAQ,EAC3BE,EAAe,CAAC,CACjB,EAAG,CAACF,CAAQ,CAAC,EAIbJ,EAAU,IAAM,CACfM,EAAe,CAAC,CACjB,EAAG,CAACH,CAAQ,CAAC,EAEb,IAAMM,EAAa,KAAK,KAAKN,EAAWI,CAAe,EACjDG,GAAUL,EAAc,GAAKE,EAE7BI,EAAkBN,EAAc,EAChCO,EAAcP,EAAcI,EAElC,SAASI,EAASC,EAAc,CAC/B,IAAMC,EAAc,KAAK,IAAI,EAAG,KAAK,IAAID,EAAML,CAAU,CAAC,EAC1DH,EAAeS,CAAW,CAC3B,CAEA,SAASC,GAAW,CACfJ,GACHN,EAAgBW,GAAS,KAAK,IAAIA,EAAO,EAAGR,CAAU,CAAC,CAEzD,CAEA,SAASS,GAAe,CACnBP,GACHL,EAAgBW,GAAS,KAAK,IAAIA,EAAO,EAAG,CAAC,CAAC,CAEhD,CAEA,SAASE,EAAYC,EAAc,CAClCZ,EAAmBY,CAAI,EACvBd,EAAe,CAAC,CACjB,CAEA,SAASe,GAAe,CACvBf,EAAeG,CAAU,CAC1B,CAEA,SAASa,GAAgB,CACxBhB,EAAe,CAAC,CACjB,CAEA,MAAO,CACN,YAAAD,EACA,cAAAiB,EACA,aAAAD,EACA,SAAAR,EACA,YAAAD,EACA,gBAAAD,EACA,SAAAK,EACA,OAAAN,EACA,SAAUH,EACV,aAAAW,EACA,YAAAC,EACA,WAAAV,CACD,CACD,CAaA,SAASc,EAA2BC,EAAoBC,EAAwC,CAC/F,OAAOD,EAAK,MAAMC,EAAW,OAAQA,EAAW,OAASA,EAAW,QAAQ,CAC7E","names":["CaretLeftIcon","CaretRightIcon","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","Root","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","Buttons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeftIcon","Separator","CaretRightIcon","defaultPageSizes","PageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","size","PageSizeValue","asChild","Slot","CursorPagination","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","clampedPage","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}

package/dist/popover.d.ts

@@ -24,7 +24,7 @@ declare const Popover: {
     /**
      * The root, stateful component that manages the open/closed state of the popover.
      *
-     * @see https://mantle.ngrok.com/components/popover#api-popover
+     * @see https://mantle.ngrok.com/components/popover#popoverroot
      *
      * @example
      * ```tsx
@@ -42,7 +42,7 @@ declare const Popover: {
     /**
      * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.
      *
-     * @see https://mantle.ngrok.com/components/popover#api-popover-anchor
+     * @see https://mantle.ngrok.com/components/popover#popoveranchor
      *
      * @example
      * ```tsx
@@ -63,7 +63,7 @@ declare const Popover: {
     /**
      * A button that closes an open popover. Can be placed anywhere within the popover content.
      *
-     * @see https://mantle.ngrok.com/components/popover#api-popover-close
+     * @see https://mantle.ngrok.com/components/popover#popoverclose
      *
      * @example
      * ```tsx
@@ -87,7 +87,7 @@ declare const Popover: {
     /**
      * The content to render inside the popover. Appears in a portal with rich styling and animations.
      *
-     * @see https://mantle.ngrok.com/components/popover#api-popover-content
+     * @see https://mantle.ngrok.com/components/popover#popovercontent
      *
      * @example
      * ```tsx
@@ -119,7 +119,7 @@ declare const Popover: {
     /**
      * The trigger button that opens the popover when clicked or focused.
      *
-     * @see https://mantle.ngrok.com/components/popover#api-popover-trigger
+     * @see https://mantle.ngrok.com/components/popover#popovertrigger
      *
      * @example
      * ```tsx

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-trigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-anchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-close\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-content\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/popover\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-anchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <Text>This popover is positioned relative to the anchor.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAgJxB,cAAAC,MAAA,oBAxHH,IAAMC,EAAwB,OAC9BA,EAAK,YAAc,UAqBnB,IAAMC,EAA2B,UACjCA,EAAQ,YAAc,iBAwBtB,IAAMC,EAA0B,SAChCA,EAAO,YAAc,gBAwBrB,IAAMC,EAAyB,QAC/BA,EAAM,YAAc,eAiCpB,IAAMC,EAAUC,EACf,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,eAAAC,EAAiB,WACjB,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAb,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWO,EACV,qaACAJ,EACAF,CACD,EACA,QAAUO,GAAU,CAKnBA,EAAM,gBAAgB,EACtBN,IAAUM,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAP,EAAQ,YAAc,iBAqBtB,IAAMW,EAAU,CAkBf,KAAAf,EAqBA,OAAAE,EAwBA,MAAAC,EAsBA,QAAAC,EAuBA,QAAAH,CACD","names":["PopoverPrimitive","forwardRef","jsx","Root","Trigger","Anchor","Close","Content","forwardRef","align","className","onClick","preferredWidth","sideOffset","props","ref","cx","event","Popover"]}
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/popover\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <Text>This popover is positioned relative to the anchor.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAgJxB,cAAAC,MAAA,oBAxHH,IAAMC,EAAwB,OAC9BA,EAAK,YAAc,UAqBnB,IAAMC,EAA2B,UACjCA,EAAQ,YAAc,iBAwBtB,IAAMC,EAA0B,SAChCA,EAAO,YAAc,gBAwBrB,IAAMC,EAAyB,QAC/BA,EAAM,YAAc,eAiCpB,IAAMC,EAAUC,EACf,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,eAAAC,EAAiB,WACjB,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAb,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWO,EACV,qaACAJ,EACAF,CACD,EACA,QAAUO,GAAU,CAKnBA,EAAM,gBAAgB,EACtBN,IAAUM,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAP,EAAQ,YAAc,iBAqBtB,IAAMW,EAAU,CAkBf,KAAAf,EAqBA,OAAAE,EAwBA,MAAAC,EAsBA,QAAAC,EAuBA,QAAAH,CACD","names":["PopoverPrimitive","forwardRef","jsx","Root","Trigger","Anchor","Close","Content","forwardRef","align","className","onClick","preferredWidth","sideOffset","props","ref","cx","event","Popover"]}

package/dist/radio-group.d.ts

@@ -22,7 +22,7 @@ type RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;
 /**
  * A group of radio items. It manages the state of the children radios.
  *
- * @see https://mantle.ngrok.com/components/radio-group
+ * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot
  *
  * @example
  * ```tsx
@@ -42,7 +42,7 @@ declare const RadioGroup: {
     /**
      * A radio button that is used inside a RadioGroup.ButtonGroup for inline grouped radio options.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-button
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupbutton
      *
      * @example
      * ```tsx
@@ -61,7 +61,7 @@ declare const RadioGroup: {
     /**
      * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-button-group
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupbuttongroup
      *
      * @example
      * ```tsx
@@ -81,7 +81,7 @@ declare const RadioGroup: {
     /**
      * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-card
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupcard
      *
      * @example
      * ```tsx
@@ -109,7 +109,7 @@ declare const RadioGroup: {
     /**
      * The selection indicator for any radio item. Shows the checked state with customizable appearance.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-indicator
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator
      *
      * @example
      * ```tsx
@@ -126,7 +126,7 @@ declare const RadioGroup: {
     /**
      * A sandbox container for input elements composed within radio group items. Prevents default radio behavior.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-input-sandbox
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupinputsandbox
      *
      * @example
      * ```tsx
@@ -150,7 +150,7 @@ declare const RadioGroup: {
     /**
      * A simple radio item that can be used inside a radio group. The conventional use-case for basic radio options.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-item
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem
      *
      * @example
      * ```tsx
@@ -166,7 +166,7 @@ declare const RadioGroup: {
     /**
      * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-item-content
+     * @see https://mantle.ngrok.com/components/radio-group#radiogroupitemcontent
      *
      * @example
      * ```tsx
@@ -188,7 +188,7 @@ declare const RadioGroup: {
     /**
      * A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-list
+     * @see https://mantle.ngrok.com/components/radio-group#radiogrouplist
      *
      * @example
      * ```tsx
@@ -214,7 +214,7 @@ declare const RadioGroup: {
     /**
      * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-list-item
+     * @see https://mantle.ngrok.com/components/radio-group#radiogrouplistitem
      *
      * @example
      * ```tsx
@@ -242,7 +242,7 @@ declare const RadioGroup: {
     /**
      * The root radio group component. Manages the state of the children radios where only one can be selected.
      *
-     * @see https://mantle.ngrok.com/components/radio-group#api-radio-group
+     * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot
      *
      * @example
      * ```tsx

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{a as v}from"./chunk-EYZYDUS2.js";import{a as y}from"./chunk-ODDNPNLN.js";import{a as l}from"./chunk-PFXFESEN.js";import{Radio as u,RadioGroup as S}from"@headlessui/react";import f from"clsx";import{Children as T,cloneElement as z,createContext as M,forwardRef as n,isValidElement as w,useContext as b,useRef as D}from"react";import{Fragment as h,jsx as a}from"react/jsx-runtime";var m=n((e,o)=>a(S,{...e,ref:o}));m.displayName="RadioGroup";var c=M({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),x=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));x.displayName="RadioItem";var E=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),P=({children:e,className:o,...r})=>{let t=b(c);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(E,{...t}):typeof e=="function"?e(t):e})};P.displayName="RadioIndicator";var C=n(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));C.displayName="RadioGroupList";var g=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));g.displayName="RadioListItem";var I=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));I.displayName="RadioCard";var k=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(c);return a(e?y:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})};k.displayName="RadioItemContent";var N=n(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));N.displayName="RadioButtonGroup";var H=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));H.displayName="RadioButton";var G=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=D(null),s=b(c),p=T.only(e),L=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let R=d.target;v(R)&&window.requestAnimationFrame(()=>{R.focus()}),o?.(d)},...t,children:w(p)?z(p,{disabled:s.disabled||p.props.disabled,tabIndex:L?-1:p.props.tabIndex}):null})};G.displayName="RadioInputSandbox";var A={Button:H,ButtonGroup:N,Card:I,Indicator:P,InputSandbox:G,Item:x,ItemContent:k,List:C,ListItem:g,Root:m};export{A as RadioGroup};
+import{a as v}from"./chunk-EYZYDUS2.js";import{a as y}from"./chunk-ADF5DAYG.js";import{a as l}from"./chunk-PFXFESEN.js";import{Radio as u,RadioGroup as S}from"@headlessui/react";import f from"clsx";import{Children as T,cloneElement as z,createContext as M,forwardRef as s,isValidElement as w,useContext as b,useRef as D}from"react";import{Fragment as h,jsx as a}from"react/jsx-runtime";var m=s((e,o)=>a(S,{...e,ref:o}));m.displayName="RadioGroup";var n=M({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),x=s(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden",o),as:"div",...r,ref:t,children:i=>a(n.Provider,{value:i,children:e})}));x.displayName="RadioItem";var E=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),P=({children:e,className:o,...r})=>{let t=b(n);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(E,{...t}):typeof e=="function"?e(t):e})};P.displayName="RadioIndicator";var C=s(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));C.displayName="RadioGroupList";var g=s(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(n.Provider,{value:i,children:e})})}));g.displayName="RadioListItem";var I=s(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(h,{children:a(n.Provider,{value:i,children:e})})}));I.displayName="RadioCard";var k=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(n);return a(e?y:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})};k.displayName="RadioItemContent";var N=s(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));N.displayName="RadioButtonGroup";var H=s(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(n.Provider,{value:i,children:e})})}));H.displayName="RadioButton";var G=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=D(null),c=b(n),p=T.only(e),L=c.disabled||!c.checked;return a("div",{role:"none",ref:i,onKeyDown:d=>{if(c.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(c.disabled){d.stopPropagation(),d.preventDefault();return}let R=d.target;v(R)&&window.requestAnimationFrame(()=>{R.focus()}),o?.(d)},...t,children:w(p)?z(p,{disabled:c.disabled||p.props.disabled,tabIndex:L?-1:p.props.tabIndex}):null})};G.displayName="RadioInputSandbox";var A={Button:H,ButtonGroup:N,Card:I,Indicator:P,InputSandbox:G,Item:x,ItemContent:k,List:C,ListItem:g,Root:m};export{A as RadioGroup};
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type { ComponentRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n * Used as the root component for grouping related radio items where only one can be selected.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-group\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Root = forwardRef<ComponentRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRoot.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-item\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t\t</HeadlessRadio>\n\t),\n);\nItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff] shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-indicator\n *\n * @example\n * ```tsx\n * <RadioGroup.Item value=\"option1\">\n *   <RadioGroup.Indicator />\n *   <span>Option 1</span>\n * </RadioGroup.Item>\n * ```\n */\nconst Indicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\nIndicator.displayName = \"RadioIndicator\";\n\n/**\n * A group of radio list items. Use RadioGroup.ListItem as direct children.\n */\nconst List = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn <Root className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n\t},\n);\nList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroup.List`.\n */\nconst ListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst Card = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n */\nconst ItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\nItemContent.displayName = \"RadioItemContent\";\n\n/**\n * An inline group of radio buttons. Use RadioGroup.Button as direct children.\n */\nconst ButtonGroup = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Root\n\t\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioGroup.ButtonGroup`.\n */\nconst Button = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst InputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\nInputSandbox.displayName = \"RadioInputSandbox\";\n\n/**\n * A group of radio items. It manages the state of the children radios.\n *\n * @see https://mantle.ngrok.com/components/radio-group\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = {\n\t/**\n\t * A radio button that is used inside a RadioGroup.ButtonGroup for inline grouped radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"option1\">Option 1</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option2\">Option 2</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option3\">Option 3</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButton,\n\t/**\n\t * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-button-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"small\">\n\t *   <Label htmlFor=\"size-group\">Size</Label>\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"small\">Small</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"medium\">Medium</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"large\">Large</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButtonGroup,\n\t/**\n\t * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-card\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"basic\">\n\t *   <div className=\"space-y-3\">\n\t *     <RadioGroup.Card value=\"basic\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Basic Plan</Text>\n\t *         <Text>$10/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *     <RadioGroup.Card value=\"pro\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Pro Plan</Text>\n\t *         <Text>$25/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *   </div>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tCard,\n\t/**\n\t * The selection indicator for any radio item. Shows the checked state with customizable appearance.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tIndicator,\n\t/**\n\t * A sandbox container for input elements composed within radio group items. Prevents default radio behavior.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-input-sandbox\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"custom\">\n\t *   <RadioGroup.Item value=\"custom\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text>Custom amount</Text>\n\t *       <RadioGroup.InputSandbox>\n\t *         <Input type=\"number\" placeholder=\"Enter amount\" />\n\t *       </RadioGroup.InputSandbox>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tInputSandbox,\n\t/**\n\t * A simple radio item that can be used inside a radio group. The conventional use-case for basic radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-item-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text weight=\"strong\">Option 1</Text>\n\t *       <Text size=\"sm\">Description for option 1</Text>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tItemContent,\n\t/**\n\t * A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"option1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 1</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"option2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 2</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-list-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"item1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"item1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 1</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">First option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"item2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 2</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">Second option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tListItem,\n\t/**\n\t * The root radio group component. Manages the state of the children radios where only one can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#api-radio-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root value={value} onValueChange={setValue}>\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <span>Option 1</span>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tRoot,\n} as const;\n\nexport {\n\t//\n\tRadioGroup,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","Root","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","Item","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","Indicator","useContext","List","clsx","ListItem","Card","ItemContent","asChild","Slot","ButtonGroup","Button","InputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement","RadioGroup"]}
+{"version":3,"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type { ComponentRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n * Used as the root component for grouping related radio items where only one can be selected.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Root = forwardRef<ComponentRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRoot.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t\t</HeadlessRadio>\n\t),\n);\nItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff] shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n *\n * @example\n * ```tsx\n * <RadioGroup.Item value=\"option1\">\n *   <RadioGroup.Indicator />\n *   <span>Option 1</span>\n * </RadioGroup.Item>\n * ```\n */\nconst Indicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\nIndicator.displayName = \"RadioIndicator\";\n\n/**\n * A group of radio list items. Use RadioGroup.ListItem as direct children.\n */\nconst List = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn <Root className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n\t},\n);\nList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroup.List`.\n */\nconst ListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst Card = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioGroup.Item`, `RadioGroup.ListItem`, or `RadioGroup.Card`.\n */\nconst ItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\nItemContent.displayName = \"RadioItemContent\";\n\n/**\n * An inline group of radio buttons. Use RadioGroup.Button as direct children.\n */\nconst ButtonGroup = forwardRef<ComponentRef<typeof Root>, RadioGroupProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<Root\n\t\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t/>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioGroup.ButtonGroup`.\n */\nconst Button = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"cursor-pointer aria-disabled:cursor-default focus:outline-hidden\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst InputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"none\"\n\t\t\tref={ref}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\nInputSandbox.displayName = \"RadioInputSandbox\";\n\n/**\n * A group of radio items. It manages the state of the children radios.\n *\n * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroup.Item value=\"option1\">\n *     <RadioGroup.Indicator />\n *     <span>Option 1</span>\n *   </RadioGroup.Item>\n *   <RadioGroup.Item value=\"option2\">\n *     <RadioGroup.Indicator />\n *     <span>Option 2</span>\n *   </RadioGroup.Item>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = {\n\t/**\n\t * A radio button that is used inside a RadioGroup.ButtonGroup for inline grouped radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"option1\">Option 1</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option2\">Option 2</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"option3\">Option 3</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButton,\n\t/**\n\t * An inline group of radio buttons. Use RadioGroup.Button as direct children for horizontal radio layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupbuttongroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"small\">\n\t *   <Label htmlFor=\"size-group\">Size</Label>\n\t *   <RadioGroup.ButtonGroup>\n\t *     <RadioGroup.Button value=\"small\">Small</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"medium\">Medium</RadioGroup.Button>\n\t *     <RadioGroup.Button value=\"large\">Large</RadioGroup.Button>\n\t *   </RadioGroup.ButtonGroup>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tButtonGroup,\n\t/**\n\t * A radio card item with enhanced styling. Use it as a child of RadioGroup for card-based radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupcard\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"basic\">\n\t *   <div className=\"space-y-3\">\n\t *     <RadioGroup.Card value=\"basic\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Basic Plan</Text>\n\t *         <Text>$10/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *     <RadioGroup.Card value=\"pro\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text weight=\"strong\">Pro Plan</Text>\n\t *         <Text>$25/month</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.Card>\n\t *   </div>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tCard,\n\t/**\n\t * The selection indicator for any radio item. Shows the checked state with customizable appearance.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupindicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tIndicator,\n\t/**\n\t * A sandbox container for input elements composed within radio group items. Prevents default radio behavior.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupinputsandbox\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"custom\">\n\t *   <RadioGroup.Item value=\"custom\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text>Custom amount</Text>\n\t *       <RadioGroup.InputSandbox>\n\t *         <Input type=\"number\" placeholder=\"Enter amount\" />\n\t *       </RadioGroup.InputSandbox>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tInputSandbox,\n\t/**\n\t * A simple radio item that can be used inside a radio group. The conventional use-case for basic radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Item value=\"option1\">\n\t *   <RadioGroup.Indicator />\n\t *   <span>Option 1</span>\n\t * </RadioGroup.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The content wrapper for any radio item. Use it to wrap labels, descriptions, or content of a radio item.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogroupitemcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <RadioGroup.ItemContent>\n\t *       <Text weight=\"strong\">Option 1</Text>\n\t *       <Text size=\"sm\">Description for option 1</Text>\n\t *     </RadioGroup.ItemContent>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tItemContent,\n\t/**\n\t * A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplist\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"option1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"option1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 1</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"option2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>Option 2</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * A radio list item that is used inside a RadioGroup.List for connected list-style radio options.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouplistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root defaultValue=\"item1\">\n\t *   <RadioGroup.List>\n\t *     <RadioGroup.ListItem value=\"item1\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 1</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">First option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *     <RadioGroup.ListItem value=\"item2\">\n\t *       <RadioGroup.ItemContent>\n\t *         <Text>List Item 2</Text>\n\t *         <Text size=\"sm\" className=\"text-muted\">Second option</Text>\n\t *       </RadioGroup.ItemContent>\n\t *     </RadioGroup.ListItem>\n\t *   </RadioGroup.List>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tListItem,\n\t/**\n\t * The root radio group component. Manages the state of the children radios where only one can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/radio-group#radiogrouproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <RadioGroup.Root value={value} onValueChange={setValue}>\n\t *   <RadioGroup.Item value=\"option1\">\n\t *     <RadioGroup.Indicator />\n\t *     <span>Option 1</span>\n\t *   </RadioGroup.Item>\n\t * </RadioGroup.Root>\n\t * ```\n\t */\n\tRoot,\n} as const;\n\nexport {\n\t//\n\tRadioGroup,\n};\n"],"mappings":"wHAEA,OAAS,SAASA,EAAe,cAAcC,MAA0B,oBAKzE,OAAOC,MAAU,OACjB,OACC,YAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,UAAAC,MACM,QA8BN,OAgKI,YAAAC,EAhKJ,OAAAC,MAAA,oBADD,IAAMC,EAAOC,EAAqE,CAACC,EAAOC,IACzFJ,EAACK,EAAA,CAAoB,GAAGF,EAAO,IAAKC,EAAK,CACzC,EACDH,EAAK,YAAc,aAkBnB,IAAMK,EAAoBC,EAAsC,CAC/D,UAAW,GACX,QAAS,GACT,SAAU,GACV,MAAO,GACP,MAAO,EACR,CAAC,EAoBKC,EAAON,EACZ,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IACnCJ,EAACW,EAAA,CACA,UAAWC,EACV,gIACAF,CACD,EACA,GAAG,MACF,GAAGP,EACJ,IAAKC,EAEJ,SAACS,GAAQb,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EAAM,SAAAJ,EAAS,EAC7D,CAEF,EACAD,EAAK,YAAc,YAUnB,IAAMM,EAAwB,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,MAAAC,EAAO,MAAAC,CAAM,IAChElB,EAAC,QACA,UAAWY,EACV,mFACAI,GAAY,4BACZD,GAAW,kCACXE,GAAS,CAACD,GAAY,6CACtBE,GAAS,mBACV,EAEC,SAAAH,GAAWf,EAAC,QAAK,UAAU,yCAAyC,EACtE,EAqBKmB,EAAY,CAAC,CAAE,SAAAV,EAAU,UAAAC,EAAW,GAAGP,CAAM,IAA2B,CAC7E,IAAMU,EAAMO,EAAWd,CAAiB,EAExC,OACCN,EAAC,OACA,UAAWY,EACV,sFACAF,CACD,EACC,GAAGP,EAEH,SAAAM,GAAY,KACZT,EAACc,EAAA,CAAuB,GAAGD,EAAK,EAC7B,OAAOJ,GAAa,WACvBA,EAASI,CAAG,EAEZJ,EAEF,CAEF,EACAU,EAAU,YAAc,iBAKxB,IAAME,EAAOnB,EACZ,CAAC,CAAE,UAAAQ,EAAW,GAAGP,CAAM,EAAGC,IAClBJ,EAACC,EAAA,CAAK,UAAWqB,EAAK,cAAeZ,CAAS,EAAI,GAAGP,EAAO,IAAKC,EAAK,CAE/E,EACAiB,EAAK,YAAc,iBAOnB,IAAME,EAAWrB,EAChB,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWC,EACV,4GACA,mEACA,yGACA,gHACA,qGACA,yOACA,iFACAF,CACD,EACA,IAAKN,EACJ,GAAGD,EAEH,SAACU,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EAAM,SAAAJ,EAAS,EACnD,EAEF,CAGH,EACAc,EAAS,YAAc,gBASvB,IAAMC,EAAOtB,EACZ,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWW,EACV,kGACA,mEACA,yGACA,gHACA,qGACA,yOACAZ,CACD,EACC,GAAGP,EACJ,IAAKC,EAEJ,SAACS,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EAAM,SAAAJ,EAAS,EACnD,EAEF,CAGH,EACAe,EAAK,YAAc,YAMnB,IAAMC,EAAc,CAAC,CAAE,QAAAC,EAAU,GAAO,SAAAjB,EAAU,UAAAC,EAAW,GAAGP,CAAM,IAA6B,CAClG,IAAMU,EAAMO,EAAWd,CAAiB,EAGxC,OACCN,EAHiB0B,EAAUC,EAAO,MAGjC,CACA,UAAWL,EAAK,iBAAkBT,EAAI,UAAY,aAAcH,CAAS,EACxE,GAAGP,EAEH,SAAAM,EACF,CAEF,EACAgB,EAAY,YAAc,mBAK1B,IAAMG,EAAc1B,EACnB,CAAC,CAAE,UAAAQ,EAAW,GAAGP,CAAM,EAAGC,IAExBJ,EAACC,EAAA,CACA,UAAWqB,EAAK,wCAAyCZ,CAAS,EACjE,GAAGP,EACJ,IAAKC,EACN,CAGH,EACAwB,EAAY,YAAc,mBAO1B,IAAMC,EAAS3B,EACd,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWC,EACV,0IACA,MACA,yGACA,mEACA,gHACA,iGACA,0IACA,iFACAF,CACD,EACA,IAAKN,EACJ,GAAGD,EAEH,SAACU,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EAAM,SAAAJ,EAAS,EACnD,EAEF,CAGH,EACAoB,EAAO,YAAc,cAQrB,IAAMC,EAAe,CAAC,CAAE,SAAArB,EAAU,QAAAsB,EAAS,UAAAC,EAAW,GAAG7B,CAAM,IAA8B,CAC5F,IAAMC,EAAM6B,EAAuB,IAAI,EACjCpB,EAAMO,EAAWd,CAAiB,EAElC4B,EAAcC,EAAS,KAAK1B,CAAQ,EAGpC2B,EAAwBvB,EAAI,UAAY,CAACA,EAAI,QAEnD,OACCb,EAAC,OACA,KAAK,OACL,IAAKI,EACL,UAAYiC,GAAU,CACrB,GAAIxB,EAAI,SAAU,CACjBwB,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrB,MACD,CACA,OAAQA,EAAM,IAAK,CAClB,IAAK,QACL,IAAK,MACJ,MACD,QACCA,EAAM,gBAAgB,CACxB,CACAL,IAAYK,CAAK,CAClB,EACA,QAAUA,GAAU,CACnB,GAAIxB,EAAI,SAAU,CACjBwB,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrB,MACD,CACA,IAAMC,EAASD,EAAM,OACjBE,EAAQD,CAAM,GACjB,OAAO,sBAAsB,IAAM,CAClCA,EAAO,MAAM,CACd,CAAC,EAEFP,IAAUM,CAAK,CAChB,EACC,GAAGlC,EAEH,SAAAqC,EAAiCN,CAAW,EAC1CO,EAAaP,EAAa,CAC1B,SAAUrB,EAAI,UAAYqB,EAAY,MAAM,SAC5C,SAAUE,EAAwB,GAAKF,EAAY,MAAM,QAC1D,CAAC,EACA,KACJ,CAEF,EACAJ,EAAa,YAAc,oBAqB3B,IAAMY,EAAa,CAiBlB,OAAAb,EAkBA,YAAAD,EA0BA,KAAAJ,EAcA,UAAAL,EAqBA,aAAAW,EAcA,KAAAtB,EAmBA,YAAAiB,EAwBA,KAAAJ,EA0BA,SAAAE,EAgBA,KAAAtB,CACD","names":["HeadlessRadio","HeadlessRadioGroup","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","Root","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","Item","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","Indicator","useContext","List","clsx","ListItem","Card","ItemContent","asChild","Slot","ButtonGroup","Button","InputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement","RadioGroup"]}

package/dist/sandboxed-on-click.d.ts

@@ -26,7 +26,7 @@ type EventProps = BaseProps & {
  * Props for the sandboxed onClick container. Spread this on the element you want
  * to prevent the click event from bubbling out of.
  *
- * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click
+ * @see https://mantle.ngrok.com/components/sandboxed-on-click#sandboxedonclick
  */
 declare const sandboxedOnClickProps: ({ allowClickEventDefault, onClick }?: EventProps) => {
     /**
@@ -44,7 +44,7 @@ type Props = ComponentProps<"div"> & WithAsChild & BaseProps;
 /**
  * A container that prevents the click event from bubbling out of it.
  *
- * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click
+ * @see https://mantle.ngrok.com/components/sandboxed-on-click#sandboxedonclick
  *
  * @example
  * ```tsx

package/dist/sandboxed-on-click.js

@@ -1,2 +1,2 @@
-import{a as n}from"./chunk-ODDNPNLN.js";import"./chunk-PFXFESEN.js";import{forwardRef as a}from"react";import{jsx as d}from"react/jsx-runtime";var s=({allowClickEventDefault:e=!1,onClick:t}={})=>({role:"presentation",onClick:o=>{o.stopPropagation(),e||o.preventDefault(),t?.(o)}}),p=a(({allowClickEventDefault:e=!1,asChild:t=!1,children:o,onClick:r,...i},l)=>d(t?n:"div",{ref:l,...i,...s({allowClickEventDefault:e,onClick:r}),children:o}));p.displayName="SandboxedOnClick";export{p as SandboxedOnClick,s as sandboxedOnClickProps};
+import{a as n}from"./chunk-ADF5DAYG.js";import"./chunk-PFXFESEN.js";import{forwardRef as a}from"react";import{jsx as d}from"react/jsx-runtime";var s=({allowClickEventDefault:e=!1,onClick:t}={})=>({role:"presentation",onClick:o=>{o.stopPropagation(),e||o.preventDefault(),t?.(o)}}),p=a(({allowClickEventDefault:e=!1,asChild:t=!1,children:o,onClick:r,...i},l)=>d(t?n:"div",{ref:l,...i,...s({allowClickEventDefault:e,onClick:r}),children:o}));p.displayName="SandboxedOnClick";export{p as SandboxedOnClick,s as sandboxedOnClickProps};
 //# sourceMappingURL=sandboxed-on-click.js.map

package/dist/sandboxed-on-click.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sandboxed-on-click/sandboxed-on-click.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype BaseProps = {\n\t/**\n\t * Only call `event.preventDefault()` in the `onClick` handler if the user\n\t * has not set `allowClickEventDefault` to `true`. This allows the user to\n\t * control whether or not the default behavior of the click event should be\n\t * allowed.\n\t *\n\t * This is useful for links or buttons that should navigate or perform some\n\t * action on click.\n\t *\n\t * @default false\n\t */\n\tallowClickEventDefault?: boolean;\n};\n\ntype EventProps = BaseProps & {\n\t/**\n\t * The click event handler.\n\t */\n\tonClick?: MouseEventHandler<HTMLElement>;\n};\n\n/**\n * Props for the sandboxed onClick container. Spread this on the element you want\n * to prevent the click event from bubbling out of.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click\n */\nconst sandboxedOnClickProps = ({ allowClickEventDefault = false, onClick }: EventProps = {}) =>\n\t({\n\t\t/**\n\t\t * Marking an element with the role presentation indicates to assistive\n\t\t * technology that this element should be ignored; it exists to support the\n\t\t * web application and is not meant for humans to interact with directly.\n\t\t *\n\t\t * @see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/65be35b0f6c6cf8b79e9a748cb657a64b78c6535/docs/rules/no-noninteractive-element-interactions.md#case-this-element-is-catching-bubbled-events-from-elements-that-it-contains\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role\n\t\t */\n\t\trole: \"presentation\",\n\t\tonClick: (event) => {\n\t\t\t/**\n\t\t\t * we _always_ want to stop propagation to prevent the event from bubbling\n\t\t\t * out of the sandboxed container\n\t\t\t */\n\t\t\tevent.stopPropagation();\n\n\t\t\t/**\n\t\t\t * Only call `event.preventDefault()` if the user has not set\n\t\t\t * `allowClickEventDefault` to true. This allows the user to control\n\t\t\t * whether or not the default behavior of the click event should be\n\t\t\t * allowed.\n\t\t\t *\n\t\t\t * This is useful for links or buttons that should navigate or perform\n\t\t\t * some action on click.\n\t\t\t */\n\t\t\tif (!allowClickEventDefault) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tonClick?.(event);\n\t\t},\n\t}) as const satisfies HTMLAttributes<HTMLElement>;\n\ntype Props = ComponentProps<\"div\"> & WithAsChild & BaseProps;\n\n/**\n * A container that prevents the click event from bubbling out of it.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click\n *\n * @example\n * ```tsx\n * <TableRow onClick={() => navigate(\"/somewhere\")}>\n *   <TableRowCell>\n *     <SandboxedOnClick allowClickEventDefault>\n *       <Anchor href=\"https://ngrok.com/docs\">\n *         See ngrok docs\n *       </Anchor>\n *     </SandboxedOnClick>\n *   </TableRowCell>\n * </TableRow>\n */\nconst SandboxedOnClick = forwardRef<ComponentRef<\"div\">, Props>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tallowClickEventDefault = false,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\t{...sandboxedOnClickProps({ allowClickEventDefault, onClick })}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nSandboxedOnClick.displayName = \"SandboxedOnClick\";\n\nexport {\n\t//,\n\tSandboxedOnClick,\n\tsandboxedOnClickProps,\n};\n"],"mappings":"oEAGA,OAAS,cAAAA,MAAkB,QAoGxB,cAAAC,MAAA,oBApEH,IAAMC,EAAwB,CAAC,CAAE,uBAAAC,EAAyB,GAAO,QAAAC,CAAQ,EAAgB,CAAC,KACxF,CASA,KAAM,eACN,QAAUC,GAAU,CAKnBA,EAAM,gBAAgB,EAWjBF,GACJE,EAAM,eAAe,EAEtBD,IAAUC,CAAK,CAChB,CACD,GAqBKC,EAAmBC,EACxB,CACC,CAEC,uBAAAJ,EAAyB,GACzB,QAAAK,EAAU,GACV,SAAAC,EACA,QAAAL,EACA,GAAGM,CACJ,EACAC,IAKCV,EAHiBO,EAAUI,EAAO,MAGjC,CACA,IAAKD,EACJ,GAAGD,EACH,GAAGR,EAAsB,CAAE,uBAAAC,EAAwB,QAAAC,CAAQ,CAAC,EAE5D,SAAAK,EACF,CAGH,EACAH,EAAiB,YAAc","names":["forwardRef","jsx","sandboxedOnClickProps","allowClickEventDefault","onClick","event","SandboxedOnClick","forwardRef","asChild","children","props","ref","Slot"]}
+{"version":3,"sources":["../src/components/sandboxed-on-click/sandboxed-on-click.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype BaseProps = {\n\t/**\n\t * Only call `event.preventDefault()` in the `onClick` handler if the user\n\t * has not set `allowClickEventDefault` to `true`. This allows the user to\n\t * control whether or not the default behavior of the click event should be\n\t * allowed.\n\t *\n\t * This is useful for links or buttons that should navigate or perform some\n\t * action on click.\n\t *\n\t * @default false\n\t */\n\tallowClickEventDefault?: boolean;\n};\n\ntype EventProps = BaseProps & {\n\t/**\n\t * The click event handler.\n\t */\n\tonClick?: MouseEventHandler<HTMLElement>;\n};\n\n/**\n * Props for the sandboxed onClick container. Spread this on the element you want\n * to prevent the click event from bubbling out of.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#sandboxedonclick\n */\nconst sandboxedOnClickProps = ({ allowClickEventDefault = false, onClick }: EventProps = {}) =>\n\t({\n\t\t/**\n\t\t * Marking an element with the role presentation indicates to assistive\n\t\t * technology that this element should be ignored; it exists to support the\n\t\t * web application and is not meant for humans to interact with directly.\n\t\t *\n\t\t * @see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/65be35b0f6c6cf8b79e9a748cb657a64b78c6535/docs/rules/no-noninteractive-element-interactions.md#case-this-element-is-catching-bubbled-events-from-elements-that-it-contains\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role\n\t\t */\n\t\trole: \"presentation\",\n\t\tonClick: (event) => {\n\t\t\t/**\n\t\t\t * we _always_ want to stop propagation to prevent the event from bubbling\n\t\t\t * out of the sandboxed container\n\t\t\t */\n\t\t\tevent.stopPropagation();\n\n\t\t\t/**\n\t\t\t * Only call `event.preventDefault()` if the user has not set\n\t\t\t * `allowClickEventDefault` to true. This allows the user to control\n\t\t\t * whether or not the default behavior of the click event should be\n\t\t\t * allowed.\n\t\t\t *\n\t\t\t * This is useful for links or buttons that should navigate or perform\n\t\t\t * some action on click.\n\t\t\t */\n\t\t\tif (!allowClickEventDefault) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tonClick?.(event);\n\t\t},\n\t}) as const satisfies HTMLAttributes<HTMLElement>;\n\ntype Props = ComponentProps<\"div\"> & WithAsChild & BaseProps;\n\n/**\n * A container that prevents the click event from bubbling out of it.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#sandboxedonclick\n *\n * @example\n * ```tsx\n * <TableRow onClick={() => navigate(\"/somewhere\")}>\n *   <TableRowCell>\n *     <SandboxedOnClick allowClickEventDefault>\n *       <Anchor href=\"https://ngrok.com/docs\">\n *         See ngrok docs\n *       </Anchor>\n *     </SandboxedOnClick>\n *   </TableRowCell>\n * </TableRow>\n */\nconst SandboxedOnClick = forwardRef<ComponentRef<\"div\">, Props>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tallowClickEventDefault = false,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\t{...sandboxedOnClickProps({ allowClickEventDefault, onClick })}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nSandboxedOnClick.displayName = \"SandboxedOnClick\";\n\nexport {\n\t//,\n\tSandboxedOnClick,\n\tsandboxedOnClickProps,\n};\n"],"mappings":"oEAGA,OAAS,cAAAA,MAAkB,QAoGxB,cAAAC,MAAA,oBApEH,IAAMC,EAAwB,CAAC,CAAE,uBAAAC,EAAyB,GAAO,QAAAC,CAAQ,EAAgB,CAAC,KACxF,CASA,KAAM,eACN,QAAUC,GAAU,CAKnBA,EAAM,gBAAgB,EAWjBF,GACJE,EAAM,eAAe,EAEtBD,IAAUC,CAAK,CAChB,CACD,GAqBKC,EAAmBC,EACxB,CACC,CAEC,uBAAAJ,EAAyB,GACzB,QAAAK,EAAU,GACV,SAAAC,EACA,QAAAL,EACA,GAAGM,CACJ,EACAC,IAKCV,EAHiBO,EAAUI,EAAO,MAGjC,CACA,IAAKD,EACJ,GAAGD,EACH,GAAGR,EAAsB,CAAE,uBAAAC,EAAwB,QAAAC,CAAQ,CAAC,EAE5D,SAAAK,EACF,CAGH,EACAH,EAAiB,YAAc","names":["forwardRef","jsx","sandboxedOnClickProps","allowClickEventDefault","onClick","event","SandboxedOnClick","forwardRef","asChild","children","props","ref","Slot"]}

package/dist/select.d.ts

@@ -37,7 +37,7 @@ declare const Select: {
     /**
      * Displays a list of options for the user to pick from—triggered by a button.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select
+     * @see https://mantle.ngrok.com/components/select#selectroot
      *
      * @example
      * ```tsx
@@ -93,7 +93,7 @@ declare const Select: {
      * The component that pops out when the select is open as a portal adjacent to the trigger button.
      * It contains a scrolling viewport of the select items.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-content
+     * @see https://mantle.ngrok.com/components/select#selectcontent
      *
      * @example
      * <Select.Root>
@@ -119,7 +119,7 @@ declare const Select: {
      * A group of related options within a select menu. Similar to an html `<optgroup>` element.
      * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-group
+     * @see https://mantle.ngrok.com/components/select#selectgroup
      *
      * @example
      * <Select.Root>
@@ -147,7 +147,7 @@ declare const Select: {
      * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.
      * Displays the children as the option's text.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-item
+     * @see https://mantle.ngrok.com/components/select#selectitem
      *
      * @example
      * <Select.Root>
@@ -167,7 +167,7 @@ declare const Select: {
     /**
      * Used to render the label of a group. It won't be focusable using arrow keys.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-label
+     * @see https://mantle.ngrok.com/components/select#selectlabel
      *
      * @example
      * <Select.Root>
@@ -193,7 +193,7 @@ declare const Select: {
     /**
      * Used to visually separate items or groups of items in the select content.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-separator
+     * @see https://mantle.ngrok.com/components/select#selectseparator
      *
      * @example
      * <Select.Root>
@@ -223,7 +223,7 @@ declare const Select: {
     /**
      * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-trigger
+     * @see https://mantle.ngrok.com/components/select#selecttrigger
      *
      * @example
      * ```tsx
@@ -243,7 +243,7 @@ declare const Select: {
     /**
      * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
      *
-     * @see https://mantle.ngrok.com/components/select#api-select-value
+     * @see https://mantle.ngrok.com/components/select#selectvalue
      *
      * @example
      * <Select.Root>

package/dist/select.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-KVXXQCAI.js";import"./chunk-LURP5WQR.js";import"./chunk-HKSO72E5.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{e as Select};
+import{a as e}from"./chunk-ZS2HEB67.js";import"./chunk-MLXONRJD.js";import"./chunk-HKSO72E5.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{e as Select};
 //# sourceMappingURL=select.js.map