@ngrok/mantle 0.60.2 → 0.61.0

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<\n\tCursorPaginationContextValue | undefined\n>(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\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\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<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\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<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\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<\n\tComponentProps<typeof Select.Trigger>,\n\t\"children\"\n> & {\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<\n\tComponentRef<typeof Select.Trigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\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\"> &\n\tWithAsChild;\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({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\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>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): 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/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"]}

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<\n\ttypeof PopoverPrimitive.Content\n> & {\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,QAkJxB,cAAAC,MAAA,oBA1HH,IAAMC,EAAwB,OAC9BA,EAAK,YAAc,UAqBnB,IAAMC,EAA2B,UACjCA,EAAQ,YAAc,iBAwBtB,IAAMC,EAA0B,SAChCA,EAAO,YAAc,gBAwBrB,IAAMC,EAAyB,QAC/BA,EAAM,YAAc,eAmCpB,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#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"]}

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/progress/progress-donut.tsx","../src/components/progress/math.ts","../src/components/progress/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tclamp,\n\tisNumber,\n\tisValidMaxNumber,\n\tisValidValueNumber,\n} from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(\n\tstrokeWidth: number | string | undefined | null,\n): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({\n\tclassName,\n\tchildren,\n\tmax: _max = defaultMax,\n\tvalue: _value,\n\t...props\n}: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-accent-600 h-full w-full flex-1 transition-all\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","clamp","value","min","max","isNumber","isValidValueNumber","isValidMaxNumber","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","Root","children","className","_max","_strokeWidth","_value","indeterminateRotationSpeed","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","cx","indeterminateTailPercent","Indicator","gradientId","useId","useContext","percentage","clsx","ProgressDonut","deriveStrokeWidthPx","strokeWidth","value","stroke","clamp","calcRadius","strokeWidthPx","ProgressPrimitive","createContext","useContext","useMemo","jsx","defaultMax","defaultContextValue","ProgressContext","createContext","Root","className","children","_max","_value","props","max","isValidMaxNumber","value","isValidValueNumber","valueNow","isNumber","ctx","useMemo","cx","Indicator","style","useContext","translatePercent","ProgressBar"]}
+{"version":3,"sources":["../src/components/progress/progress-donut.tsx","../src/components/progress/math.ts","../src/components/progress/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { clamp, isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t\"viewBox\" | \"role\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"width\" | \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n\t/**\n\t * Controls the rotation speed of the indeterminate spinner state.\n\t *\n\t * Accepts a Tailwind `animation-duration-*` utility (e.g. `animation-duration-[2s]`).\n\t *\n\t * This prop is applied in addition to `animate-spin` to control the speed of the indeterminate spinner.\n\t * @default `animation-duration-[15s]`\n\t */\n\tindeterminateRotationSpeed?: `animation-duration-${string}`;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\tindeterminateRotationSpeed,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(_strokeWidth ?? defaultContextValue.strokeWidth);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-6 text-gray-200 dark:text-gray-300\",\n\t\t\t\t\tvalue === \"indeterminate\" && [\n\t\t\t\t\t\t\"animate-spin\",\n\t\t\t\t\t\t// Default duration only if consumer hasn't set one.\n\t\t\t\t\t\t// Without this guard, both our `[15s]` and consumer overrides (e.g. `[2s]`)\n\t\t\t\t\t\t// end up in the DOM. Since tw-animate-css utilities aren't currently deduped by\n\t\t\t\t\t\t// tailwind-merge, whichever class Tailwind happened to emit last wins,\n\t\t\t\t\t\t// which isn't reliable.\n\t\t\t\t\t\tindeterminateRotationSpeed ?? \"animation-duration-[15s]\",\n\t\t\t\t\t],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\" ? indeterminateTailPercent : ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={ctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(strokeWidth: number | string | undefined | null): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(value: number, { min, max }: { min: number; max: number }): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext = createContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({ className, children, max: _max = defaultMax, value: _value, ...props }: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max) ? _value : _value == null ? 0 : \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\"bg-accent-600 h-full w-full flex-1 transition-all\", className)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","clamp","value","min","max","isNumber","isValidValueNumber","isValidMaxNumber","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","Root","children","className","_max","_strokeWidth","_value","indeterminateRotationSpeed","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","cx","indeterminateTailPercent","Indicator","gradientId","useId","useContext","percentage","clsx","ProgressDonut","deriveStrokeWidthPx","strokeWidth","value","stroke","clamp","calcRadius","strokeWidthPx","ProgressPrimitive","createContext","useContext","useMemo","jsx","defaultMax","defaultContextValue","ProgressContext","createContext","Root","className","children","_max","_value","props","max","isValidMaxNumber","value","isValidValueNumber","valueNow","isNumber","ctx","useMemo","cx","Indicator","style","useContext","translatePercent","ProgressBar"]}

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{a as v}from"./chunk-EYZYDUS2.js";import{a as y}from"./chunk-UNFO4DZV.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-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};
 //# 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 {\n\tRadio as HeadlessRadio,\n\tRadioGroup as HeadlessRadioGroup,\n} 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 {\n\tComponentRef,\n\tHTMLAttributes,\n\tPropsWithChildren,\n\tReactNode,\n} 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<\n\tOmit<HeadlessRadioGroupProps, \"as\" | \"children\">\n>;\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<\n\tComponentRef<typeof HeadlessRadioGroup>,\n\tRadioGroupProps\n>((props, ref) => <HeadlessRadioGroup {...props} ref={ref} />);\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) => (\n\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t{children}\n\t\t\t\t</RadioStateContext.Provider>\n\t\t\t)}\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 = ({\n\tchecked,\n\tdisabled,\n\tfocus,\n\thover,\n}: 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 (\n\t\t\t<Root className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />\n\t\t);\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}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</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}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</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 = ({\n\tasChild = false,\n\tchildren,\n\tclassName,\n\t...props\n}: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\n\t\t\t\t\"min-w-0 flex-1\",\n\t\t\t\tctx.disabled && \"opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</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}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</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 = ({\n\tchildren,\n\tonClick,\n\tonKeyDown,\n\t...props\n}: 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#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"]}

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

@@ -28,7 +28,7 @@ type EventProps = BaseProps & {
  *
  * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click
  */
-declare const sandboxedOnClickProps: ({ allowClickEventDefault, onClick, }?: EventProps) => {
+declare const sandboxedOnClickProps: ({ allowClickEventDefault, onClick }?: EventProps) => {
     /**
      * Marking an element with the role presentation indicates to assistive
      * technology that this element should be ignored; it exists to support the

package/dist/sandboxed-on-click.js

@@ -1,2 +1,2 @@
-import{a as n}from"./chunk-UNFO4DZV.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-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};
 //# 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 {\n\tComponentProps,\n\tComponentRef,\n\tHTMLAttributes,\n\tMouseEventHandler,\n} 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 = ({\n\tallowClickEventDefault = false,\n\tonClick,\n}: 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":"oEAQA,OAAS,cAAAA,MAAkB,QAuGxB,cAAAC,MAAA,oBAvEH,IAAMC,EAAwB,CAAC,CAC9B,uBAAAC,EAAyB,GACzB,QAAAC,CACD,EAAgB,CAAC,KACf,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#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"]}

package/dist/select.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-JATU64S7.js";import"./chunk-YKYEISYH.js";import"./chunk-MF2QITTY.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{e as Select};
+import{a as e}from"./chunk-ERCBHCUY.js";import"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{e as Select};
 //# sourceMappingURL=select.js.map

package/dist/separator.js

@@ -1,2 +1,2 @@
-import{a as r,b as o}from"./chunk-YKYEISYH.js";import"./chunk-UNFO4DZV.js";import"./chunk-PFXFESEN.js";export{r as HorizontalSeparatorGroup,o as Separator};
+import{a as r,b as o}from"./chunk-LURP5WQR.js";import"./chunk-ODDNPNLN.js";import"./chunk-PFXFESEN.js";export{r as HorizontalSeparatorGroup,o as Separator};
 //# sourceMappingURL=separator.js.map

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-OE4YWO7O.js";import{d as c}from"./chunk-UGWSBMHH.js";import"./chunk-PEGWGFY7.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-3AUCEZTZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-HG2MWNPU.js";import"./chunk-B2CXQETQ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-ZCTK5X4D.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map