@ngrok/mantle 0.70.2 → 0.71.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/agent.json +76 -0
- package/dist/alert-dialog.d.ts +337 -90
- package/dist/alert-dialog.js.map +1 -1
- package/dist/alert.js.map +1 -1
- package/dist/anchor-2stEauOz.js.map +1 -1
- package/dist/anchor.d.ts +45 -4
- package/dist/badge.d.ts +32 -3
- package/dist/badge.js.map +1 -1
- package/dist/{button-BMgAxAwM.d.ts → button-Bq0x5Pv4.d.ts} +4 -4
- package/dist/button.d.ts +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/code-block.d.ts +1 -1
- package/dist/code-block_highlight-utils.d.ts +1 -1
- package/dist/code.d.ts +22 -1
- package/dist/code.js.map +1 -1
- package/dist/combobox.d.ts +10 -0
- package/dist/combobox.js.map +1 -1
- package/dist/command.d.ts +7 -7
- package/dist/command.js.map +1 -1
- package/dist/copy-to-clipboard-DjOD_Mwb.js.map +1 -1
- package/dist/data-table.d.ts +303 -22
- package/dist/data-table.js.map +1 -1
- package/dist/dialog-BHzl9eye.js.map +1 -1
- package/dist/dialog.d.ts +6 -1
- package/dist/flag.d.ts +33 -4
- package/dist/flag.js.map +1 -1
- package/dist/hooks.d.ts +297 -72
- package/dist/hooks.js.map +1 -1
- package/dist/hover-card.d.ts +15 -10
- package/dist/hover-card.js.map +1 -1
- package/dist/icons.js.map +1 -1
- package/dist/{index-DMAkXvFI.d.ts → index-C91lxoX9.d.ts} +55 -12
- package/dist/input.d.ts +1 -1
- package/dist/input.js.map +1 -1
- package/dist/kbd-CAVUiqBT.js.map +1 -1
- package/dist/kbd.d.ts +37 -8
- package/dist/label.d.ts +40 -9
- package/dist/label.js.map +1 -1
- package/dist/llms.txt +77 -0
- package/dist/media-object.d.ts +26 -10
- package/dist/media-object.js.map +1 -1
- package/dist/multi-select.d.ts +185 -34
- package/dist/multi-select.js.map +1 -1
- package/dist/otp-input.d.ts +167 -0
- package/dist/otp-input.js +2 -0
- package/dist/otp-input.js.map +1 -0
- package/dist/pagination.d.ts +1 -1
- package/dist/pagination.js.map +1 -1
- package/dist/popover.d.ts +7 -5
- package/dist/popover.js.map +1 -1
- package/dist/primitive-tXm_8n_t.js.map +1 -1
- package/dist/progress.js.map +1 -1
- package/dist/resolve-pre-rendered-props-C-kiaLHj.js.map +1 -1
- package/dist/{resolve-pre-rendered-props-x-52gvQ1.d.ts → resolve-pre-rendered-props-CNUnH1fU.d.ts} +2 -2
- package/dist/select-DOgdZO0Q.js.map +1 -1
- package/dist/{select-BjpP51vO.d.ts → select-DZutJxyr.d.ts} +9 -1
- package/dist/select.d.ts +1 -1
- package/dist/separator-DSOIrnhj.js.map +1 -1
- package/dist/sheet.d.ts +5 -1
- package/dist/sheet.js.map +1 -1
- package/dist/skeleton.d.ts +32 -5
- package/dist/skeleton.js.map +1 -1
- package/dist/sort-DzCsa6Qj.js.map +1 -1
- package/dist/split-button.d.ts +1 -1
- package/dist/{table--DsTqaWO.d.ts → table-BsNJBKiq.d.ts} +7 -3
- package/dist/table-Cl4nlRMR.js.map +1 -1
- package/dist/table.d.ts +1 -1
- package/dist/theme-provider-BFcnjeME.js.map +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js.map +1 -1
- package/dist/tooltip.d.ts +31 -14
- package/dist/tooltip.js.map +1 -1
- package/dist/use-copy-to-clipboard-C7vsjJe-.js.map +1 -1
- package/dist/use-matches-media-query-CojcYxlA.js.map +1 -1
- package/dist/use-prefers-reduced-motion-aXfsyo-k.js.map +1 -1
- package/package.json +14 -7
package/dist/pagination.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","names":[],"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={handleNext}\n * onPreviousPage={handlePrevious}\n * />\n * <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"cursor-pagination\"\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={() => loadNextPage()}\n * onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup data-slot=\"cursor-pagination-buttons\" appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-previous\"\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\n\t\t\t\t\tdata-slot=\"cursor-pagination-separator\"\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tclassName=\"min-h-5\"\n\t\t\t\t/>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-next\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n * pageSizes={[10, 20, 50, 100]}\n * onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"cursor-pagination-page-size-select\"\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n * <span>Items per page:</span>\n * <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"cursor-pagination-page-size-value\"\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/pagination\n *\n * @example\n * Composition:\n * ```\n * CursorPagination.Root\n * ├── CursorPagination.PageSizeSelect\n * ├── CursorPagination.PageSizeValue\n * └── CursorPagination.Buttons\n * ```\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={handleNext}\n * onPreviousPage={handlePrevious}\n * />\n * <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t * <CursorPagination.Buttons\n\t * hasNextPage={hasNext}\n\t * hasPreviousPage={hasPrevious}\n\t * onNextPage={handleNext}\n\t * onPreviousPage={handlePrevious}\n\t * />\n\t * <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t * hasNextPage={hasNext}\n\t * hasPreviousPage={hasPrevious}\n\t * onNextPage={() => loadNextPage()}\n\t * onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t * pageSizes={[10, 20, 50, 100]}\n\t * onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t * <span>Items per page:</span>\n\t * <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n * listSize: 150,\n * pageSize: 10\n * });\n *\n * return (\n * <div>\n * <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n * <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n * Previous\n * </button>\n * <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n * Next\n * </button>\n * </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst clampedPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(clampedPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination.js","names":[],"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={handleNext}\n * onPreviousPage={handlePrevious}\n * />\n * <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"cursor-pagination\"\n\t\t\t\t\tclassName={cx(\"inline-flex items-center justify-between gap-2\", className)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={() => loadNextPage()}\n * onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<ComponentRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup data-slot=\"cursor-pagination-buttons\" appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-previous\"\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\n\t\t\t\t\tdata-slot=\"cursor-pagination-separator\"\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\tclassName=\"min-h-5\"\n\t\t\t\t/>\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-slot=\"cursor-pagination-next\"\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof Select.Trigger>, \"children\"> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n * pageSizes={[10, 20, 50, 100]}\n * onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<ComponentRef<typeof Select.Trigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"cursor-pagination-page-size-select\"\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> & WithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n * <span>Items per page:</span>\n * <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({ asChild = false, className, ...props }: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(ctx, \"CursorPageSizeValue must be used as a child of a CursorPagination component\");\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tdata-slot=\"cursor-pagination-page-size-value\"\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/pagination\n *\n * @example\n * Composition:\n * ```\n * CursorPagination.Root\n * ├── CursorPagination.PageSizeSelect\n * ├── CursorPagination.PageSizeValue\n * └── CursorPagination.Buttons\n * ```\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n * <CursorPagination.Buttons\n * hasNextPage={hasNext}\n * hasPreviousPage={hasPrevious}\n * onNextPage={handleNext}\n * onPreviousPage={handlePrevious}\n * />\n * <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t * <CursorPagination.Buttons\n\t * hasNextPage={hasNext}\n\t * hasPreviousPage={hasPrevious}\n\t * onNextPage={handleNext}\n\t * onPreviousPage={handlePrevious}\n\t * />\n\t * <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t * hasNextPage={hasNext}\n\t * hasPreviousPage={hasPrevious}\n\t * onNextPage={() => loadNextPage()}\n\t * onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t * pageSizes={[10, 20, 50, 100]}\n\t * onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t * <span>Items per page:</span>\n\t * <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n * listSize: 150,\n * pageSize: 10\n * });\n *\n * return (\n * <div>\n * <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n * <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n * Previous\n * </button>\n * <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n * Next\n * </button>\n * </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst clampedPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(clampedPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(list: readonly T[], pagination: OffsetPaginationState): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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"}
|
package/dist/popover.d.ts
CHANGED
|
@@ -5,16 +5,18 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
|
5
5
|
/**
|
|
6
6
|
* A floating overlay that displays rich content in a portal, triggered by a button.
|
|
7
7
|
*
|
|
8
|
+
* Use `Popover` for INTERACTIVE overlay content — small forms, settings
|
|
9
|
+
* menus, color pickers, action lists. The user opens it deliberately
|
|
10
|
+
* (click/tap or focus + space). For short, non-interactive label hints
|
|
11
|
+
* triggered by hover, use `Tooltip` instead. For non-essential preview
|
|
12
|
+
* content shown on hover, use `HoverCard`.
|
|
13
|
+
*
|
|
8
14
|
* `Popover` is a non-modal dialog by default: focus moves into the content
|
|
9
15
|
* when it opens, `Escape` closes and returns focus to the trigger, clicking
|
|
10
16
|
* outside dismisses, and the page (body and any scroll containers) continues
|
|
11
17
|
* to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside
|
|
12
18
|
* the content, block interaction with the rest of the page, and lock body
|
|
13
|
-
* scroll while the popover is open.
|
|
14
|
-
* content must be interactive — forms, action menus, filters, settings.
|
|
15
|
-
* Prefer `Tooltip` for short, non-interactive labels on controls, or
|
|
16
|
-
* `HoverCard` for a sighted-only preview of content that already lives
|
|
17
|
-
* behind a link.
|
|
19
|
+
* scroll while the popover is open.
|
|
18
20
|
*
|
|
19
21
|
* @see https://mantle.ngrok.com/components/popover
|
|
20
22
|
* @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
package/dist/popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Anchor asChild>\n * <div>Anchor element</div>\n * </Popover.Anchor>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * <Popover.Close asChild>\n * <Button type=\"button\">Close</Button>\n * </Popover.Close>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\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 * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open. Use a `Popover` when the floating\n * content must be interactive — forms, action menus, filters, settings.\n * Prefer `Tooltip` for short, non-interactive labels on controls, or\n * `HoverCard` for a sighted-only preview of content that already lives\n * behind a link.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n * └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button>Open popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This is the popover content.</p>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Anchor asChild>\n\t * <div>Position relative to this element</div>\n\t * </Popover.Anchor>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This popover is positioned relative to the anchor.</p>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\">Close</Button>\n\t * </Popover.Close>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Settings</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"flex items-center justify-between\">\n\t * <Text>Settings Panel</Text>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t * </Popover.Close>\n\t * </div>\n\t * <Text>Configure your preferences here.</Text>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Show Info</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content side=\"top\" align=\"center\">\n\t * <div className=\"space-y-2\">\n\t * <Text weight=\"strong\">Additional Information</Text>\n\t * <Text>This is the content inside the popover.</Text>\n\t * <Button type=\"button\" size=\"sm\">Action</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Options\n\t * </Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"space-y-2\">\n\t * <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t * <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA2CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}
|
|
1
|
+
{"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverroot\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovertrigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#popoveranchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Anchor asChild>\n * <div>Anchor element</div>\n * </Popover.Anchor>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popoverclose\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * <Popover.Close asChild>\n * <Button type=\"button\">Close</Button>\n * </Popover.Close>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#popovercontent\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tdata-slot=\"popover-content\"\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 * Use `Popover` for INTERACTIVE overlay content — small forms, settings\n * menus, color pickers, action lists. The user opens it deliberately\n * (click/tap or focus + space). For short, non-interactive label hints\n * triggered by hover, use `Tooltip` instead. For non-essential preview\n * content shown on hover, use `HoverCard`.\n *\n * `Popover` is a non-modal dialog by default: focus moves into the content\n * when it opens, `Escape` closes and returns focus to the trigger, clicking\n * outside dismisses, and the page (body and any scroll containers) continues\n * to scroll normally. Pass `modal` on `Popover.Root` to trap focus inside\n * the content, block interaction with the rest of the page, and lock body\n * scroll while the popover is open.\n *\n * @see https://mantle.ngrok.com/components/popover\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @example\n * Composition:\n * ```\n * Popover.Root\n * ├── Popover.Trigger\n * ├── Popover.Anchor\n * └── Popover.Content\n * └── Popover.Close\n * ```\n *\n * @example\n * ```tsx\n * <Popover.Root>\n * <Popover.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Popover\n * </Button>\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>This is the popover content.</p>\n * </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button>Open popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This is the popover content.</p>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoveranchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Anchor asChild>\n\t * <div>Position relative to this element</div>\n\t * </Popover.Anchor>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Open Popover</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <p>This popover is positioned relative to the anchor.</p>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\">Close</Button>\n\t * </Popover.Close>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popoverclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Settings</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"flex items-center justify-between\">\n\t * <Text>Settings Panel</Text>\n\t * <Popover.Close asChild>\n\t * <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t * </Popover.Close>\n\t * </div>\n\t * <Text>Configure your preferences here.</Text>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovercontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\">Show Info</Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content side=\"top\" align=\"center\">\n\t * <div className=\"space-y-2\">\n\t * <Text weight=\"strong\">Additional Information</Text>\n\t * <Text>This is the content inside the popover.</Text>\n\t * <Button type=\"button\" size=\"sm\">Action</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#popovertrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t * <Popover.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Options\n\t * </Button>\n\t * </Popover.Trigger>\n\t * <Popover.Content>\n\t * <div className=\"space-y-2\">\n\t * <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t * <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t * </div>\n\t * </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"0JAyBA,MAAM,EAAO,EAAiB,KAC9B,EAAK,YAAc,UAqBnB,MAAM,EAAU,EAAiB,QACjC,EAAQ,YAAc,iBAwBtB,MAAM,EAAS,EAAiB,OAChC,EAAO,YAAc,gBAwBrB,MAAM,EAAQ,EAAiB,MAC/B,EAAM,YAAc,eAiCpB,MAAM,EAAU,GAEd,CAEC,QAAQ,SACR,YACA,UACA,iBAAiB,WACjB,aAAa,EACb,GAAG,GAEJ,IAEA,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACQ,QACP,YAAU,kBACV,UAAW,EACV,qaACA,EACA,EACA,CACD,QAAU,GAAU,CAKnB,EAAM,iBAAiB,CACvB,IAAU,EAAM,EAEZ,MACO,aACZ,GAAI,EACH,CAAA,CACuB,CAAA,CAE3B,CACD,EAAQ,YAAc,iBA6CtB,MAAM,EAAU,CAkBf,OAwBA,SAwBA,QAsBA,UAuBA,UACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primitive-tXm_8n_t.js","names":[],"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\n\ntype DialogPrimitiveContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider value={{ hasDescription, setHasDescription }}>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>((props, ref) => (\n\t<DialogPrimitive.Overlay\n\t\t/**\n\t\t * Mark the overlay with a data attribute so we can target it, e.g. in\n\t\t * event handlers\n\t\t */\n\t\tdata-overlay\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\nconst Content = forwardRef<ComponentRef<\"div\">, DialogPrimitiveContentProps>(\n\t({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {\n\t\tconst ctx = useContext(InternalDialogContext);\n\n\t\treturn (\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tonEscapeKeyDown={(event) => {\n\t\t\t\t\tpreventCloseOnNestedPopupEscape(event);\n\t\t\t\t\tonEscapeKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\n/**\n * Type guard to check if the event target is the overlay component\n */\nfunction isDialogOverlayTarget(target: EventTarget | null): boolean {\n\tif (target instanceof HTMLElement) {\n\t\treturn target.hasAttribute(\"data-overlay\");\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n\tisDialogOverlayTarget,\n};\n\n/**\n * Prevents the parent dialog/sheet/alert-dialog from closing on Escape when a\n * nested popup owner inside the same modal content is currently expanded.\n *\n * Flow:\n * - If focus is outside the nested popup owner, Escape closes the parent modal.\n * - If focus is inside the nested popup owner and its controlled popup is open,\n * the first Escape closes only the nested popup and keeps the parent modal open.\n * - Once the nested popup has closed, a subsequent Escape closes the parent modal.\n */\nfunction preventCloseOnNestedPopupEscape(\n\tevent: Parameters<NonNullable<DialogPrimitiveContentProps[\"onEscapeKeyDown\"]>>[0],\n): void {\n\tif (!isParentNode(event.currentTarget)) {\n\t\treturn;\n\t}\n\n\tconst currentTarget = event.currentTarget;\n\tconst activeElement =\n\t\tcurrentTarget instanceof Document\n\t\t\t? currentTarget.activeElement\n\t\t\t: (currentTarget.ownerDocument?.activeElement ?? null);\n\n\tconst owner = getExpandedPopupOwner(event.target) ?? getExpandedPopupOwner(activeElement);\n\n\tconst popup = owner ? getControlledPopup(owner) : null;\n\n\tif (\n\t\towner != null &&\n\t\tparseBooleanish(owner.getAttribute(\"aria-expanded\")) &&\n\t\tpopup != null &&\n\t\tcurrentTarget.contains(owner) &&\n\t\tcurrentTarget.contains(popup) &&\n\t\t// Only block closing if the popup is actively open. Always-visible lists\n\t\t// without open/close state (e.g. cmdk) carry neither attribute and should\n\t\t// never block the dialog from closing.\n\t\t// - Ariakit sets `data-open=\"true\"` when its popover is open.\n\t\t// - Radix sets `data-state=\"open\"` when its popup is open.\n\t\t(popup.getAttribute(\"data-open\") === \"true\" || popup.getAttribute(\"data-state\") === \"open\")\n\t) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Finds the nearest expanded popup owner for a node using ARIA relationships.\n *\n * A matching owner must expose `aria-expanded=\"true\"` and `aria-controls`, which\n * lets nested controls like comboboxes and input-attached popovers signal that an\n * inner surface is currently open.\n */\nfunction getExpandedPopupOwner(node: EventTarget | null): HTMLElement | null {\n\tif (!isHTMLElement(node)) {\n\t\treturn null;\n\t}\n\n\tconst owner = node.closest<HTMLElement>(\"[aria-expanded='true'][aria-controls]\");\n\treturn owner;\n}\n\n/**\n * Resolves the popup element controlled by an expanded owner via `aria-controls`.\n */\nfunction getControlledPopup(owner: HTMLElement): HTMLElement | null {\n\tconst popupId = owner.getAttribute(\"aria-controls\");\n\tif (!popupId) {\n\t\treturn null;\n\t}\n\n\tconst popup = owner.ownerDocument.getElementById(popupId);\n\treturn popup instanceof HTMLElement ? popup : null;\n}\n\n/**\n * Narrows an event target to an HTMLElement so DOM traversal helpers can be used safely.\n */\nfunction isHTMLElement(value: EventTarget | null): value is HTMLElement {\n\treturn value instanceof HTMLElement;\n}\n\n/**\n * Narrows an event target to a queryable DOM parent node, such as an Element or Document.\n */\nfunction isParentNode(value: EventTarget | null): value is ParentNode & Node {\n\treturn value instanceof Node && \"querySelector\" in value;\n}\n"],"mappings":"2SAuBA,MAAM,EAAwB,EAA0C,CACvE,eAAgB,GAChB,sBAAyB,GACzB,CAAC,CAEF,SAAS,EAAK,EAA8D,CAC3E,GAAM,CAAC,EAAgB,GAAqB,EAAS,GAAM,CAE3D,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,iBAAgB,oBAAmB,UAC3E,EAAC,EAAgB,KAAjB,CAAsB,GAAI,EAAS,CAAA,CACH,CAAA,CAGnC,EAAK,YAAc,sBAEnB,MAAM,EAAU,EAAgB,QAChC,EAAQ,YAAc,yBAEtB,MAAM,EAAS,EAAgB,OAC/B,EAAO,YAAc,wBAErB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,uBAEpB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAgB,QAAjB,CAKC,eAAA,GACK,MACL,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,yBAEtB,MAAM,EAAU,GACd,CAAE,kBAAiB,oBAAmB,uBAAsB,GAAG,GAAS,IAAQ,CAChF,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAC,EAAgB,QAAjB,CACM,MACL,gBAAkB,GAAU,CAC3B,EAAgC,EAAM,CACtC,IAAkB,EAAM,EAEzB,kBAAoB,GAAU,CAC7B,EAAgC,EAAM,CACtC,IAAoB,EAAM,EAE3B,qBAAuB,GAAU,CAChC,EAAgC,EAAM,CACtC,IAAuB,EAAM,EAG9B,GAAM,EAAI,eAAqD,EAAE,CAAtC,CAAE,mBAAoB,IAAA,GAAW,CAC5D,GAAI,EACH,CAAA,EAGJ,CACD,EAAQ,YAAc,yBAEtB,MAAM,EAAQ,EAAgB,MAOxB,EAAc,GAGjB,CAAE,UAAS,WAAU,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAI,kBAAkB,GAAK,KACd,EAAI,kBAAkB,GAAM,EACvC,CAAC,EAAI,CAAC,CAET,IAAM,EAAY,EAAU,EAAO,MAEnC,OACC,EAAC,EAAgB,YAAjB,CAAkC,MAAK,QAAA,YACtC,EAAC,EAAD,CAAW,GAAI,EAAQ,WAAqB,CAAA,CACf,CAAA,EAE9B,CACF,EAAY,YAAc,6BAK1B,SAAS,EAAsB,EAAqC,CAInE,OAHI,aAAkB,YACd,EAAO,aAAa,eAAe,CAEpC,GA0BR,SAAS,EACR,EACO,CACP,GAAI,CAAC,EAAa,EAAM,cAAc,CACrC,OAGD,IAAM,EAAgB,EAAM,cACtB,EACL,aAAyB,SACtB,EAAc,cACb,EAAc,eAAe,eAAiB,KAE7C,EAAQ,EAAsB,EAAM,OAAO,EAAI,EAAsB,EAAc,CAEnF,EAAQ,EAAQ,EAAmB,EAAM,CAAG,KAGjD,GAAS,MACT,EAAgB,EAAM,aAAa,gBAAgB,CAAC,EACpD,GAAS,MACT,EAAc,SAAS,EAAM,EAC7B,EAAc,SAAS,EAAM,GAM5B,EAAM,aAAa,YAAY,GAAK,QAAU,EAAM,aAAa,aAAa,GAAK,SAEpF,EAAM,gBAAgB,CAWxB,SAAS,EAAsB,EAA8C,CAM5E,OALK,EAAc,EAAK,CAIV,EAAK,QAAqB,
|
|
1
|
+
{"version":3,"file":"primitive-tXm_8n_t.js","names":[],"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\n\ntype DialogPrimitiveContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider value={{ hasDescription, setHasDescription }}>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>((props, ref) => (\n\t<DialogPrimitive.Overlay\n\t\t/**\n\t\t * Mark the overlay with a data attribute so we can target it, e.g. in\n\t\t * event handlers\n\t\t */\n\t\tdata-overlay\n\t\tref={ref}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\nconst Content = forwardRef<ComponentRef<\"div\">, DialogPrimitiveContentProps>(\n\t({ onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {\n\t\tconst ctx = useContext(InternalDialogContext);\n\n\t\treturn (\n\t\t\t<DialogPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tonEscapeKeyDown={(event) => {\n\t\t\t\t\tpreventCloseOnNestedPopupEscape(event);\n\t\t\t\t\tonEscapeKeyDown?.(event);\n\t\t\t\t}}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n * Renders as a `div` by default, but can be changed to any other element using the `asChild` prop.\n */\nconst Description = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ asChild, children, ...props }, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<DialogPrimitive.Description ref={ref} asChild>\n\t\t\t<Component {...props}>{children}</Component>\n\t\t</DialogPrimitive.Description>\n\t);\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\n/**\n * Type guard to check if the event target is the overlay component\n */\nfunction isDialogOverlayTarget(target: EventTarget | null): boolean {\n\tif (target instanceof HTMLElement) {\n\t\treturn target.hasAttribute(\"data-overlay\");\n\t}\n\treturn false;\n}\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n\tisDialogOverlayTarget,\n};\n\n/**\n * Prevents the parent dialog/sheet/alert-dialog from closing on Escape when a\n * nested popup owner inside the same modal content is currently expanded.\n *\n * Flow:\n * - If focus is outside the nested popup owner, Escape closes the parent modal.\n * - If focus is inside the nested popup owner and its controlled popup is open,\n * the first Escape closes only the nested popup and keeps the parent modal open.\n * - Once the nested popup has closed, a subsequent Escape closes the parent modal.\n */\nfunction preventCloseOnNestedPopupEscape(\n\tevent: Parameters<NonNullable<DialogPrimitiveContentProps[\"onEscapeKeyDown\"]>>[0],\n): void {\n\tif (!isParentNode(event.currentTarget)) {\n\t\treturn;\n\t}\n\n\tconst currentTarget = event.currentTarget;\n\tconst activeElement =\n\t\tcurrentTarget instanceof Document\n\t\t\t? currentTarget.activeElement\n\t\t\t: (currentTarget.ownerDocument?.activeElement ?? null);\n\n\tconst owner = getExpandedPopupOwner(event.target) ?? getExpandedPopupOwner(activeElement);\n\n\tconst popup = owner ? getControlledPopup(owner) : null;\n\n\tif (\n\t\towner != null &&\n\t\tparseBooleanish(owner.getAttribute(\"aria-expanded\")) &&\n\t\tpopup != null &&\n\t\tcurrentTarget.contains(owner) &&\n\t\tcurrentTarget.contains(popup) &&\n\t\t// Only block closing if the popup is actively open. Always-visible lists\n\t\t// without open/close state (e.g. cmdk) carry neither attribute and should\n\t\t// never block the dialog from closing.\n\t\t// - Ariakit sets `data-open=\"true\"` when its popover is open.\n\t\t// - Radix sets `data-state=\"open\"` when its popup is open.\n\t\t(popup.getAttribute(\"data-open\") === \"true\" || popup.getAttribute(\"data-state\") === \"open\")\n\t) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Finds the nearest expanded popup owner for a node using ARIA relationships.\n *\n * A matching owner must expose `aria-expanded=\"true\"` and `aria-controls`, which\n * lets nested controls like comboboxes and input-attached popovers signal that an\n * inner surface is currently open.\n */\nfunction getExpandedPopupOwner(node: EventTarget | null): HTMLElement | null {\n\tif (!isHTMLElement(node)) {\n\t\treturn null;\n\t}\n\n\tconst owner = node.closest<HTMLElement>(\"[aria-expanded='true'][aria-controls]\");\n\treturn owner;\n}\n\n/**\n * Resolves the popup element controlled by an expanded owner via `aria-controls`.\n */\nfunction getControlledPopup(owner: HTMLElement): HTMLElement | null {\n\tconst popupId = owner.getAttribute(\"aria-controls\");\n\tif (!popupId) {\n\t\treturn null;\n\t}\n\n\tconst popup = owner.ownerDocument.getElementById(popupId);\n\treturn popup instanceof HTMLElement ? popup : null;\n}\n\n/**\n * Narrows an event target to an HTMLElement so DOM traversal helpers can be used safely.\n */\nfunction isHTMLElement(value: EventTarget | null): value is HTMLElement {\n\treturn value instanceof HTMLElement;\n}\n\n/**\n * Narrows an event target to a queryable DOM parent node, such as an Element or Document.\n */\nfunction isParentNode(value: EventTarget | null): value is ParentNode & Node {\n\treturn value instanceof Node && \"querySelector\" in value;\n}\n"],"mappings":"2SAuBA,MAAM,EAAwB,EAA0C,CACvE,eAAgB,GAChB,sBAAyB,GACzB,CAAC,CAEF,SAAS,EAAK,EAA8D,CAC3E,GAAM,CAAC,EAAgB,GAAqB,EAAS,GAAM,CAE3D,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,iBAAgB,oBAAmB,UAC3E,EAAC,EAAgB,KAAjB,CAAsB,GAAI,EAAS,CAAA,CACH,CAAA,CAGnC,EAAK,YAAc,sBAEnB,MAAM,EAAU,EAAgB,QAChC,EAAQ,YAAc,yBAEtB,MAAM,EAAS,EAAgB,OAC/B,EAAO,YAAc,wBAErB,MAAM,EAAQ,EAAgB,MAC9B,EAAM,YAAc,uBAEpB,MAAM,EAAU,GAGb,EAAO,IACT,EAAC,EAAgB,QAAjB,CAKC,eAAA,GACK,MACL,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,yBAEtB,MAAM,EAAU,GACd,CAAE,kBAAiB,oBAAmB,uBAAsB,GAAG,GAAS,IAAQ,CAChF,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAC,EAAgB,QAAjB,CACM,MACL,gBAAkB,GAAU,CAC3B,EAAgC,EAAM,CACtC,IAAkB,EAAM,EAEzB,kBAAoB,GAAU,CAC7B,EAAgC,EAAM,CACtC,IAAoB,EAAM,EAE3B,qBAAuB,GAAU,CAChC,EAAgC,EAAM,CACtC,IAAuB,EAAM,EAG9B,GAAM,EAAI,eAAqD,EAAE,CAAtC,CAAE,mBAAoB,IAAA,GAAW,CAC5D,GAAI,EACH,CAAA,EAGJ,CACD,EAAQ,YAAc,yBAEtB,MAAM,EAAQ,EAAgB,MAOxB,EAAc,GAGjB,CAAE,UAAS,WAAU,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAM,EAAW,EAAsB,CAE7C,OACC,EAAI,kBAAkB,GAAK,KACd,EAAI,kBAAkB,GAAM,EACvC,CAAC,EAAI,CAAC,CAET,IAAM,EAAY,EAAU,EAAO,MAEnC,OACC,EAAC,EAAgB,YAAjB,CAAkC,MAAK,QAAA,YACtC,EAAC,EAAD,CAAW,GAAI,EAAQ,WAAqB,CAAA,CACf,CAAA,EAE9B,CACF,EAAY,YAAc,6BAK1B,SAAS,EAAsB,EAAqC,CAInE,OAHI,aAAkB,YACd,EAAO,aAAa,eAAe,CAEpC,GA0BR,SAAS,EACR,EACO,CACP,GAAI,CAAC,EAAa,EAAM,cAAc,CACrC,OAGD,IAAM,EAAgB,EAAM,cACtB,EACL,aAAyB,SACtB,EAAc,cACb,EAAc,eAAe,eAAiB,KAE7C,EAAQ,EAAsB,EAAM,OAAO,EAAI,EAAsB,EAAc,CAEnF,EAAQ,EAAQ,EAAmB,EAAM,CAAG,KAGjD,GAAS,MACT,EAAgB,EAAM,aAAa,gBAAgB,CAAC,EACpD,GAAS,MACT,EAAc,SAAS,EAAM,EAC7B,EAAc,SAAS,EAAM,GAM5B,EAAM,aAAa,YAAY,GAAK,QAAU,EAAM,aAAa,aAAa,GAAK,SAEpF,EAAM,gBAAgB,CAWxB,SAAS,EAAsB,EAA8C,CAM5E,OALK,EAAc,EAAK,CAIV,EAAK,QAAqB,wCAC5B,CAJJ,KAUT,SAAS,EAAmB,EAAwC,CACnE,IAAM,EAAU,EAAM,aAAa,gBAAgB,CACnD,GAAI,CAAC,EACJ,OAAO,KAGR,IAAM,EAAQ,EAAM,cAAc,eAAe,EAAQ,CACzD,OAAO,aAAiB,YAAc,EAAQ,KAM/C,SAAS,EAAc,EAAiD,CACvE,OAAO,aAAiB,YAMzB,SAAS,EAAa,EAAuD,CAC5E,OAAO,aAAiB,MAAQ,kBAAmB"}
|
package/dist/progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","names":["defaultMax","ProgressContext","Root","Indicator","clsx"],"sources":["../src/components/progress/math.ts","../src/components/progress/progress-donut.tsx","../src/components/progress/progress-bar.tsx"],"sourcesContent":["/**\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","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\tdata-slot=\"progress-donut\"\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 data-slot=\"progress-donut-indicator\" 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 * Composition:\n * ```\n * ProgressDonut.Root\n * └── ProgressDonut.Indicator\n * ```\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","\"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-bar\"\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-bar-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 * Composition:\n * ```\n * ProgressBar.Root\n * └── ProgressBar.Indicator\n * ```\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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"}
|
|
1
|
+
{"version":3,"file":"progress.js","names":["defaultMax","ProgressContext","Root","Indicator","clsx"],"sources":["../src/components/progress/math.ts","../src/components/progress/progress-donut.tsx","../src/components/progress/progress-bar.tsx"],"sourcesContent":["/**\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","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\tdata-slot=\"progress-donut\"\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 data-slot=\"progress-donut-indicator\" 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 * Composition:\n * ```\n * ProgressDonut.Root\n * └── ProgressDonut.Indicator\n * ```\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","\"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-bar\"\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-bar-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 * Composition:\n * ```\n * ProgressBar.Root\n * └── ProgressBar.Indicator\n * ```\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolve-pre-rendered-props-C-kiaLHj.js","names":[],"sources":["../src/components/code-block/mantle-code.ts","../src/components/code-block/line-numbers.ts","../src/components/code-block/decorate-highlighted-html.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize-indentation.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/parse-line-options.ts","../src/components/code-block/resolve-pre-rendered-props.ts"],"sourcesContent":["import type { SupportedLanguage } from \"../code-block/supported-languages.js\";\nimport type { LineRange } from \"../code-block/line-numbers.js\";\nimport type { Indentation } from \"../code-block/indentation.js\";\n\n/** Languages that represent shell/terminal commands. */\nconst shellLanguages = new Set<SupportedLanguage>([\"bash\", \"sh\", \"shell\"]);\n\n/** Returns the default `showLineNumbers` value for a given language and code string. Single-line shell snippets default to `false`; everything else defaults to `true`. */\nfunction defaultShowLineNumbers(language: SupportedLanguage, code: string): boolean {\n\tif (shellLanguages.has(language) && !code.trim().includes(\"\\n\")) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\nconst mantleCodeBlockValueBrand: unique symbol = Symbol(\"MantleCodeBlockValue\");\n\n/**\n * The value produced by `mantleCode()`. Contains pre-rendered Shiki HTML (injected\n * by the Vite plugin at build time) and the original code string for the copy button.\n *\n * `~preHtml` is required at render time. Runtime syntax highlighting is intentionally\n * unsupported; only placeholder substitution for interpolated values is performed.\n */\ntype MantleCodeBlockValue = {\n\t/**\n\t * Nominal type brand to prevent accidental use of plain objects.\n\t */\n\t[mantleCodeBlockValueBrand]: true;\n\t/**\n\t * The language used for syntax highlighting.\n\t */\n\tlanguage: SupportedLanguage;\n\t/**\n\t * The original code string (used by the copy button).\n\t */\n\tcode: string;\n\t/**\n\t * Fully pre-rendered Shiki HTML injected by the Vite plugin or server highlighter.\n\t * This must be present for rendering.\n\t *\n\t * **Security:** This HTML is injected via `dangerouslySetInnerHTML`. It must\n\t * come from a trusted source (Shiki output from the Vite plugin or\n\t * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input.\n\t */\n\t\"~preHtml\"?: string | undefined;\n\t/**\n\t * Runtime values used to replace `SHIKI_VAL_N` placeholders in `~preHtml`.\n\t * This enables interpolated template expressions while preserving build-time highlighting.\n\t */\n\t\"~preVals\"?: unknown[] | undefined;\n\t/**\n\t * Placeholder token prefix used by the Vite transform for interpolated values.\n\t * When omitted, CodeBlock falls back to the legacy `SHIKI_VAL_<n>` format.\n\t */\n\t\"~preValToken\"?: string | undefined;\n\t/**\n\t * Optional default for line-number rendering when this value is displayed.\n\t */\n\t\"~showLineNumbers\"?: boolean | undefined;\n\t/**\n\t * Optional default highlighted line numbers/ranges when this value is displayed.\n\t */\n\t\"~highlightLines\"?: (LineRange | number)[] | undefined;\n\t/**\n\t * Optional default start line number when line numbers are displayed.\n\t * @default 1\n\t */\n\t\"~lineNumberStart\"?: number | undefined;\n};\n\n/** Maps each key starting with `OldPrefix` to `NewPrefix`, leaving other keys unchanged. */\ntype ReplacePrefix<T, OldPrefix extends string, NewPrefix extends string> = {\n\t[K in keyof T as K extends `${OldPrefix}${infer Rest}` ? `${NewPrefix}${Rest}` : K]: T[K];\n};\n\n/** Public input shape for `createMantleCodeBlockValue`, with `~`-prefixed keys renamed to unprefixed. */\ntype MantleCodeBlockValueInput = ReplacePrefix<\n\tOmit<MantleCodeBlockValue, typeof mantleCodeBlockValueBrand>,\n\t\"~\",\n\t\"\"\n>;\n\n/** Options for configuring line numbers, highlights, and indentation in `mantleCode()`. */\ntype MantleCodeOptions = {\n\t/** Line numbers or ranges to visually highlight in the code block. */\n\thighlightLines?: (LineRange | number)[] | undefined;\n\t/** The indentation style to use when normalizing the code string. */\n\tindentation?: Indentation | undefined;\n\t/**\n\t * The starting line number when line numbers are displayed.\n\t * @default 1\n\t */\n\tlineNumberStart?: number | undefined;\n\t/**\n\t * Whether to show line numbers in the code block. Defaults to `true` for most\n\t * languages, but `false` for single-line shell snippets (`bash`, `sh`, `shell`).\n\t */\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Creates a `MantleCodeBlockValue` for use with `CodeBlock.Code`.\n *\n * **Security:** The `preHtml` field is rendered via `dangerouslySetInnerHTML`.\n * Only pass HTML produced by Shiki (via the Vite plugin or\n * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input as `preHtml`.\n */\nfunction createMantleCodeBlockValue({\n\tpreHtml,\n\tpreValToken,\n\tpreVals,\n\thighlightLines,\n\tlineNumberStart,\n\tshowLineNumbers,\n\tcode,\n\tlanguage,\n}: MantleCodeBlockValueInput): MantleCodeBlockValue {\n\treturn {\n\t\t[mantleCodeBlockValueBrand]: true,\n\t\tlanguage,\n\t\tcode,\n\t\t\"~preHtml\": preHtml,\n\t\t\"~preValToken\": preValToken,\n\t\t\"~preVals\": preVals,\n\t\t\"~highlightLines\": highlightLines,\n\t\t\"~lineNumberStart\": lineNumberStart,\n\t\t\"~showLineNumbers\": showLineNumbers,\n\t};\n}\n\n/** Joins a `TemplateStringsArray` and its interpolated values into a single code string. */\nfunction buildCodeFromTemplate(strings: TemplateStringsArray, values: unknown[]): string {\n\tlet code = \"\";\n\tfor (let index = 0; index < strings.length; index += 1) {\n\t\tcode += strings[index] ?? \"\";\n\t\tif (index < values.length) {\n\t\t\tcode += String(values[index]);\n\t\t}\n\t}\n\treturn code;\n}\n\n/**\n * Tagged template literal for Shiki syntax highlighting.\n *\n * Returns a `MantleCodeBlockValue` that `CodeBlock.Code` renders.\n * The Vite transform plugin rewrites calls to this function at build time,\n * inlining pre-rendered Shiki HTML so that no highlighting work happens in the browser.\n * Configure it via `mantleCodeBlockPlugins()` in `vite.config.ts`.\n *\n * Interpolated template expressions are supported via placeholder substitution.\n *\n * Line numbers are shown by default (`showLineNumbers` defaults to `true`),\n * except for single-line shell snippets (`bash`, `sh`, `shell`) where they default to `false`.\n *\n * @example\n * ```tsx\n * // Static string (line numbers shown by default)\n * mantleCode(\"typescript\")`const x: string = \"hello\";`\n * // Interpolated string\n * mantleCode(\"typescript\")`const greeting = \"Hello, ${name}!\";`\n * // Disable line numbers\n * mantleCode(\"typescript\", { showLineNumbers: false })`const x = 1;`\n * // Single-line shell — line numbers hidden by default\n * mantleCode(\"bash\")`npm install @ngrok/mantle`\n * ```\n */\nfunction mantleCode(\n\tlanguage: SupportedLanguage,\n\toptions: MantleCodeOptions = {},\n): (strings: TemplateStringsArray, ...values: unknown[]) => MantleCodeBlockValue {\n\tconst { showLineNumbers, highlightLines, lineNumberStart } = options;\n\n\treturn (strings, ...values) => {\n\t\tconst code = buildCodeFromTemplate(strings, values);\n\n\t\treturn createMantleCodeBlockValue({\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\tpreHtml: undefined,\n\t\t\tpreVals: values.length > 0 ? values : undefined,\n\t\t\thighlightLines,\n\t\t\tlineNumberStart,\n\t\t\tshowLineNumbers: showLineNumbers ?? defaultShowLineNumbers(language, code),\n\t\t});\n\t};\n}\n\nexport { defaultShowLineNumbers, mantleCode };\nexport { createMantleCodeBlockValue };\nexport type { MantleCodeBlockValue, MantleCodeOptions };\n","/**\n * A line range is a string in the format of `start-end` where `start` and `end` are line numbers.\n */\nexport type LineRange = `${number}-${number}`;\n\nconst MAX_EXPANDED_LINE_RANGE_LENGTH = 1_000;\n\n/**\n * Given a list of line ranges and numbers, resolves them into a unique list of line numbers as a set.\n *\n * @example\n * ```tsx\n * const highlightedLines = resolveLineNumbers(1, \"3-5\", 7, \"10-12\");\n * // Returns: Set {1, 3, 4, 5, 7, 10, 11, 12}\n *\n * const singleLine = resolveLineNumbers(42);\n * // Returns: Set {42}\n * ```\n */\nexport function resolveLineNumbers(...items: (LineRange | number)[]): Set<number> {\n\tconst lineNumberSet = new Set<number>();\n\n\tfor (const item of items) {\n\t\tif (typeof item === \"number\") {\n\t\t\tif (!isPositiveLineNumber(item)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// only support integer line numbers\n\t\t\tconst int = Math.floor(item);\n\t\t\tlineNumberSet.add(int);\n\t\t} else {\n\t\t\tconst separatorIndex = item.indexOf(\"-\");\n\t\t\tconst startPart = item.slice(0, separatorIndex);\n\t\t\tconst endPart = item.slice(separatorIndex + 1);\n\t\t\tlet start = Number.parseInt(startPart, 10);\n\t\t\tlet end = Number.parseInt(endPart, 10);\n\n\t\t\t// ignore invalid ranges that don't contain valid line numbers\n\t\t\tif (!isPositiveLineNumber(start) || !isPositiveLineNumber(end)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// swap start and end if they are backwards\n\t\t\tif (start > end) {\n\t\t\t\t[start, end] = [end, start];\n\t\t\t}\n\n\t\t\tif (end - start + 1 > MAX_EXPANDED_LINE_RANGE_LENGTH) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// add all line numbers in the range, inclusive\n\t\t\tfor (let i = start; i <= end; i++) {\n\t\t\t\tlineNumberSet.add(i);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn lineNumberSet;\n}\n\n/**\n * Type Predicate: checks if a value is a positive, finite integer.\n */\nconst isPositiveLineNumber = (value: number | undefined): value is number =>\n\tvalue != null && !Number.isNaN(value) && value > 0 && Number.isFinite(value);\n","import type { LineRange } from \"./line-numbers.js\";\nimport { resolveLineNumbers } from \"./line-numbers.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/** Removes trailing `\\n` and `\\r` characters from the end of a string. */\nfunction trimTrailingNewlines(input: string): string {\n\tlet end = input.length;\n\twhile (end > 0 && (input.charCodeAt(end - 1) === 10 || input.charCodeAt(end - 1) === 13)) {\n\t\tend -= 1;\n\t}\n\treturn end === input.length ? input : input.slice(0, end);\n}\n\n/** Splits Shiki-highlighted HTML into per-line content, unwrapping `<span class=\"line\">` wrappers. */\nfunction splitHighlightedHtmlIntoLines(html: string): string[] {\n\tconst normalizedHtml = trimTrailingNewlines(html).replaceAll(\"\\r\\n\", \"\\n\").replaceAll(\"\\r\", \"\\n\");\n\tconst shikiLines = normalizedHtml.split(\"\\n\");\n\tconst linePrefix = '<span class=\"line\">';\n\tconst lineSuffix = \"</span>\";\n\n\tfor (let i = 0; i < shikiLines.length; i++) {\n\t\tconst line = shikiLines[i] ?? \"\";\n\t\tif (line.startsWith(linePrefix) && line.endsWith(lineSuffix)) {\n\t\t\tshikiLines[i] = line.slice(linePrefix.length, line.length - lineSuffix.length);\n\t\t}\n\t}\n\n\treturn shikiLines;\n}\n\n/** Input for {@link decorateHighlightedHtml}. */\ntype DecorateHighlightedHtmlInput = {\n\thighlightLines?: (LineRange | number)[] | undefined;\n\thtml: string;\n\tlineNumberStart?: number | undefined;\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Wraps each line of Shiki-highlighted HTML in Mantle's line-number and\n * line-highlight markup, producing the final HTML rendered by `CodeBlock.Code`.\n */\nfunction decorateHighlightedHtml({\n\thighlightLines,\n\thtml,\n\tlineNumberStart = 1,\n\tshowLineNumbers = false,\n}: DecorateHighlightedHtmlInput): string {\n\tconst highlightedLineNumbers = resolveLineNumbers(...(highlightLines ?? []));\n\tconst lines = splitHighlightedHtmlIntoLines(html);\n\tlet output = \"\";\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i] ?? \"\";\n\t\tconst lineNumber = lineNumberStart + i;\n\t\tconst lineClassName = cx(\n\t\t\t\"mantle-code-line\",\n\t\t\thighlightedLineNumbers.has(lineNumber) && \"mantle-code-line-highlighted\",\n\t\t);\n\n\t\tconst lineNumberHtml = showLineNumbers\n\t\t\t? `<span class=\"mantle-code-line-number\" data-slot=\"line-number\">${lineNumber}</span>`\n\t\t\t: \"\";\n\n\t\toutput += `<span class=\"${lineClassName}\" data-line-number=\"${lineNumber}\">${lineNumberHtml}<span class=\"mantle-code-line-content\" data-slot=\"line-content\">${line === \"\" ? \" \" : line}</span></span>`;\n\t}\n\treturn output;\n}\n\nexport { decorateHighlightedHtml };\nexport type { DecorateHighlightedHtmlInput };\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\nconst tabIndentedLanguageSet = new Set<string>(tabIndentedLanguages);\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\nconst spaceIndentedLanguageSet = new Set<string>(spaceIndentedLanguages);\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(value: SupportedLanguage): value is TabIndentedLanguage {\n\treturn tabIndentedLanguageSet.has(value);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(value: SupportedLanguage): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguageSet.has(value);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst indentation = options?.indentation ?? \"spaces\";\n\tconst normalizedLineEndings = value.replace(/\\r\\n?/g, \"\\n\");\n\tconst trimmed = normalizedLineEndings.trim();\n\n\tif (trimmed === \"\") {\n\t\treturn \"\";\n\t}\n\n\tconst minIndent = findMinIndent(normalizedLineEndings);\n\tconst lines = trimmed.split(\"\\n\");\n\tconst normalizedLines = new Array<string>(lines.length);\n\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i];\n\t\tif (line == null) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst dedentedLine = startsWithNonWhitespace(line) ? line : line.slice(minIndent);\n\t\tnormalizedLines[i] = normalizeLeadingIndentation(dedentedLine, indentation);\n\t}\n\n\treturn normalizedLines.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n\n/**\n * Rewrites only the leading indentation of a non-empty line into the requested\n * indentation style, leaving the rest of the line untouched.\n */\nfunction normalizeLeadingIndentation(line: string, indentation: Indentation): string {\n\tlet indentEnd = 0;\n\twhile (indentEnd < line.length) {\n\t\tconst character = line[indentEnd];\n\t\tif (character !== \" \" && character !== \"\\t\") {\n\t\t\tbreak;\n\t\t}\n\t\tindentEnd += 1;\n\t}\n\n\tif (indentEnd === 0 || indentEnd === line.length) {\n\t\treturn line;\n\t}\n\n\tconst leadingWhitespace = line.slice(0, indentEnd);\n\tconst normalizedLeadingWhitespace =\n\t\tindentation === \"spaces\"\n\t\t\t? leadingWhitespace.replace(/\\t/g, \" \")\n\t\t\t: leadingWhitespace.replace(/ {2}/g, \"\\t\");\n\n\treturn normalizedLeadingWhitespace + line.slice(indentEnd);\n}\n\n/**\n * Returns true when a line begins with visible content instead of indentation.\n */\nfunction startsWithNonWhitespace(line: string): boolean {\n\tconst firstCharacter = line[0];\n\treturn firstCharacter != null && firstCharacter !== \" \" && firstCharacter !== \"\\t\";\n}\n\n/**\n * Find the shortest indentation of a multiline string.\n */\nfunction findMinIndent(value: string): number {\n\tlet minIndent = Number.POSITIVE_INFINITY;\n\tlet indent = 0;\n\tlet atLineStart = true;\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst char = value[i];\n\n\t\tif (atLineStart) {\n\t\t\tif (char === \" \" || char === \"\\t\") {\n\t\t\t\tindent += 1;\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\t\tindent = 0;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (indent < minIndent) {\n\t\t\t\tminIndent = indent;\n\t\t\t\tif (minIndent === 0) {\n\t\t\t\t\treturn 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\tatLineStart = false;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\tatLineStart = true;\n\t\t\tindent = 0;\n\t\t}\n\t}\n\n\treturn minIndent === Number.POSITIVE_INFINITY ? 0 : minIndent;\n}\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\nconst supportedLanguageSet = new Set<SupportedLanguage>(supportedLanguages);\nconst defaultLanguage = \"text\" satisfies SupportedLanguage;\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"text\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tconst trimmed = value?.trim() ?? \"\";\n\tif (!trimmed) {\n\t\treturn defaultLanguage;\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst prefixSeparatorIndex = trimmed.indexOf(\"-\");\n\tconst maybeLanguage =\n\t\tprefixSeparatorIndex === -1 ? trimmed : trimmed.slice(prefixSeparatorIndex + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : defaultLanguage;\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn typeof value === \"string\" && supportedLanguageSet.has(value as SupportedLanguage);\n};\n\nexport {\n\t//,\n\tisSupportedLanguage,\n\tparseLanguage,\n};\n\nexport type { SupportedLanguage };\n","import type { LineRange } from \"./line-numbers.js\";\n\n/** Parses a boolean or `\"true\"`/`\"false\"` string into a boolean. Returns `undefined` for unrecognized values. */\nfunction parseCodeBlockShowLineNumbers(value: unknown): boolean | undefined {\n\tif (typeof value === \"boolean\") {\n\t\treturn value;\n\t}\n\tif (typeof value === \"string\") {\n\t\tif (value === \"true\") {\n\t\t\treturn true;\n\t\t}\n\t\tif (value === \"false\") {\n\t\t\treturn false;\n\t\t}\n\t}\n\treturn undefined;\n}\n\n/** Parses a positive integer (or its string representation) for the starting line number. Returns `undefined` for invalid values. */\nfunction parseCodeBlockLineNumberStart(value: unknown): number | undefined {\n\tif (typeof value === \"number\" && Number.isFinite(value) && value > 0) {\n\t\treturn Math.floor(value);\n\t}\n\tif (typeof value === \"string\" && /^\\d+$/.test(value)) {\n\t\tconst parsed = Number.parseInt(value, 10);\n\t\treturn parsed > 0 ? parsed : undefined;\n\t}\n\treturn undefined;\n}\n\n/** Parses highlight line specifications from an array or comma-separated string (e.g. `[1, \"3-5\"]` or `\"1,3-5\"`). Returns `undefined` when no valid entries are found. */\nfunction parseCodeBlockHighlightLines(value: unknown): (LineRange | number)[] | undefined {\n\tconst parseSingle = (item: unknown): LineRange | number | undefined => {\n\t\tif (typeof item === \"number\") {\n\t\t\treturn Number.isFinite(item) && item > 0 ? Math.floor(item) : undefined;\n\t\t}\n\t\tif (typeof item === \"string\") {\n\t\t\tconst trimmed = item.trim();\n\t\t\tif (/^\\d+$/.test(trimmed)) {\n\t\t\t\tconst parsed = Number.parseInt(trimmed, 10);\n\t\t\t\treturn parsed > 0 ? parsed : undefined;\n\t\t\t}\n\t\t\tif (/^\\d+-\\d+$/.test(trimmed)) {\n\t\t\t\tconst [startStr, endStr] = trimmed.split(\"-\");\n\t\t\t\tconst start = Number.parseInt(startStr ?? \"\", 10);\n\t\t\t\tconst end = Number.parseInt(endStr ?? \"\", 10);\n\t\t\t\tif (start > 0 && end > 0) {\n\t\t\t\t\treturn trimmed as LineRange;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t}\n\t\treturn undefined;\n\t};\n\n\tif (typeof value === \"string\") {\n\t\tconst parsed: (LineRange | number)[] = [];\n\t\tconst segments = value.split(\",\");\n\t\tfor (const segment of segments) {\n\t\t\tconst maybe = parseSingle(segment);\n\t\t\tif (maybe != null) {\n\t\t\t\tparsed.push(maybe);\n\t\t\t}\n\t\t}\n\t\treturn parsed.length > 0 ? parsed : undefined;\n\t}\n\n\tif (!Array.isArray(value)) {\n\t\treturn undefined;\n\t}\n\tconst parsed: (LineRange | number)[] = [];\n\tfor (const item of value) {\n\t\tconst maybe = parseSingle(item);\n\t\tif (maybe != null) {\n\t\t\tparsed.push(maybe);\n\t\t}\n\t}\n\treturn parsed.length > 0 ? parsed : undefined;\n}\n\nexport {\n\t//,\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\nimport { isSupportedLanguage } from \"./supported-languages.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\nimport {\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n} from \"./parse-line-options.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\n/** The visual mode preset for a code block (determines header icon). */\ntype Mode = (typeof modes)[number];\n\n/** User-facing input shape for code block metadata (metastring key-value pairs). */\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\n/** Resolved code block metadata with defaults applied. */\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\n/** The type of the default metadata constant. */\ntype DefaultMeta = typeof defaultMeta;\n\n/** Parses a code fence metastring (e.g. `title=\"example\" collapsible`) into a structured `Meta` object. */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson: Record<string, unknown> = {};\n\tconst tokens = tokenizeMetastring(metastring);\n\tfor (const token of tokens) {\n\t\tconst separatorIndex = token.indexOf(\"=\");\n\t\tconst key = separatorIndex === -1 ? token : token.slice(0, separatorIndex);\n\t\tconst value = separatorIndex === -1 ? undefined : token.slice(separatorIndex + 1);\n\n\t\tif (!key) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst normalized = normalizeValue(value);\n\t\tmetaJson[key] = normalized ?? true;\n\t}\n\n\treturn parseMetaJson(metaJson);\n}\n\n/** Strips surrounding double-quotes and trims whitespace from a metastring value. */\nfunction normalizeValue(value: string | undefined) {\n\tif (value == null) {\n\t\treturn undefined;\n\t}\n\tconst trimmed = value.trim();\n\tconst lastIndex = trimmed.length - 1;\n\tif (lastIndex >= 1 && trimmed.charCodeAt(0) === 34 && trimmed.charCodeAt(lastIndex) === 34) {\n\t\treturn trimmed.slice(1, lastIndex);\n\t}\n\treturn trimmed;\n}\n\n/** Splits a metastring into whitespace-delimited tokens, respecting double-quoted segments. */\nfunction tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet current = \"\";\n\tlet inQuotes = false;\n\n\tfor (let i = 0; i < input.length; i++) {\n\t\tconst char = input[i] ?? \"\";\n\t\tif (!inQuotes && isMetastringWhitespace(char)) {\n\t\t\tif (current) {\n\t\t\t\tresult.push(current);\n\t\t\t\tcurrent = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrent += char;\n\t\t} else {\n\t\t\tcurrent += char;\n\t\t}\n\t}\n\n\tif (current) {\n\t\tresult.push(current);\n\t}\n\n\treturn result;\n}\n\n/** Returns `true` for the ASCII whitespace characters a metastring may use to separate tokens. */\nfunction isMetastringWhitespace(char: string): boolean {\n\treturn char === \" \" || char === \"\\t\" || char === \"\\n\" || char === \"\\r\";\n}\n\n/** Type predicate: checks if a value is a valid code block `Mode`. */\nfunction isMode(input: unknown): input is Mode {\n\treturn input === \"cli\" || input === \"file\" || input === \"traffic-policy\";\n}\n\n/** Converts a raw key-value record (from tokenized metastring) into a validated `Meta` object. */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation) ? indentation : defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n\n/** Props that the rehype plugin attaches to `<pre>` elements for pre-rendered code blocks. */\ntype ResolvePreRenderedCodeBlockPropsInput = {\n\tcollapsible?: unknown;\n\tdisableCopy?: unknown;\n\tmantleCode?: unknown;\n\tmantleCollapsible?: unknown;\n\tmantleDisableCopy?: unknown;\n\tmantleHighlightLines?: unknown;\n\tmantleLanguage?: unknown;\n\tmantleLineNumberStart?: unknown;\n\tmantleMode?: unknown;\n\tmantlePreHtml?: unknown;\n\tmantleShowLineNumbers?: unknown;\n\tmantleTitle?: unknown;\n\tmode?: unknown;\n\ttitle?: unknown;\n};\n\n/** Combined input type for a `<pre>` element that may carry both metastring and pre-rendered props. */\ntype CodeBlockPreElementInput = MetaInput & ResolvePreRenderedCodeBlockPropsInput;\n\ntype PreRenderedCodeBlockPropKey = keyof ResolvePreRenderedCodeBlockPropsInput;\n\n/** Normalized code block props extracted from pre-rendered `<pre>` element attributes. */\ntype ResolvedPreRenderedCodeBlockProps = {\n\tcode: string | undefined;\n\tcollapsible: boolean | undefined;\n\tdisableCopy: boolean | undefined;\n\thighlightLines: (number | `${number}-${number}`)[] | undefined;\n\tlanguage: SupportedLanguage | undefined;\n\tlineNumberStart: number | undefined;\n\tmode: Mode | undefined;\n\tpreHtml: string | undefined;\n\trawLanguage: unknown;\n\tshowLineNumbers: boolean | undefined;\n\ttitle: string | undefined;\n};\n\n/** Result of {@link resolvePreRenderedCodeBlockProps}: extracted Mantle props and remaining pass-through props. */\ntype ResolvePreRenderedCodeBlockPropsResult<T extends Record<string, unknown>> = {\n\tmantleCode: ResolvedPreRenderedCodeBlockProps | undefined;\n\tprops: Omit<T, PreRenderedCodeBlockPropKey>;\n};\n\n/**\n * Extracts and normalizes `mantle*` props from a `<pre>` element's attributes,\n * separating them from pass-through props. Returns `undefined` for the Mantle\n * payload when no pre-rendered attributes are present.\n */\nfunction resolvePreRenderedCodeBlockProps<\n\tT extends ResolvePreRenderedCodeBlockPropsInput & Record<string, unknown>,\n>(input: T): ResolvePreRenderedCodeBlockPropsResult<T> {\n\tconst {\n\t\tcollapsible,\n\t\tdisableCopy,\n\t\tmantleCode,\n\t\tmantleCollapsible,\n\t\tmantleDisableCopy,\n\t\tmantleHighlightLines,\n\t\tmantleLanguage,\n\t\tmantleLineNumberStart,\n\t\tmantleMode,\n\t\tmantlePreHtml,\n\t\tmantleShowLineNumbers,\n\t\tmantleTitle,\n\t\tmode,\n\t\ttitle,\n\t\t...props\n\t} = input;\n\n\tconst hasPayload =\n\t\tmantleLanguage != null ||\n\t\tmantleCode != null ||\n\t\tmantlePreHtml != null ||\n\t\tmantleShowLineNumbers != null ||\n\t\tmantleHighlightLines != null ||\n\t\tmantleLineNumberStart != null ||\n\t\tmantleCollapsible != null ||\n\t\tmantleDisableCopy != null ||\n\t\tmantleMode != null ||\n\t\tmantleTitle != null;\n\n\tif (!hasPayload) {\n\t\treturn {\n\t\t\tmantleCode: undefined,\n\t\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t\t};\n\t}\n\n\treturn {\n\t\tmantleCode: {\n\t\t\tcode: typeof mantleCode === \"string\" ? mantleCode : undefined,\n\t\t\tcollapsible:\n\t\t\t\t(typeof mantleCollapsible === \"string\" || typeof mantleCollapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleCollapsible)\n\t\t\t\t\t: undefined) ??\n\t\t\t\t(typeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t\t: undefined),\n\t\t\tdisableCopy:\n\t\t\t\ttypeof mantleDisableCopy === \"string\" || typeof mantleDisableCopy === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleDisableCopy)\n\t\t\t\t\t: typeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t\t\t: undefined,\n\t\t\thighlightLines: parseCodeBlockHighlightLines(mantleHighlightLines),\n\t\t\tlanguage:\n\t\t\t\ttypeof mantleLanguage === \"string\" && isSupportedLanguage(mantleLanguage)\n\t\t\t\t\t? mantleLanguage\n\t\t\t\t\t: undefined,\n\t\t\tlineNumberStart: parseCodeBlockLineNumberStart(mantleLineNumberStart),\n\t\t\tmode: isMode(mantleMode) ? mantleMode : isMode(mode) ? mode : undefined,\n\t\t\tpreHtml: typeof mantlePreHtml === \"string\" ? mantlePreHtml : undefined,\n\t\t\trawLanguage: mantleLanguage,\n\t\t\tshowLineNumbers: parseCodeBlockShowLineNumbers(mantleShowLineNumbers),\n\t\t\ttitle:\n\t\t\t\ttypeof mantleTitle === \"string\"\n\t\t\t\t\t? mantleTitle.trim()\n\t\t\t\t\t: typeof title === \"string\"\n\t\t\t\t\t\t? title.trim()\n\t\t\t\t\t\t: undefined,\n\t\t},\n\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t};\n}\n\nexport { resolvePreRenderedCodeBlockProps };\nexport {\n\t//,\n\tdefaultMeta,\n\tnormalizeValue,\n\tparseMetastring,\n\ttokenizeMetastring,\n};\n\nexport type {\n\tCodeBlockPreElementInput,\n\tDefaultMeta,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tResolvePreRenderedCodeBlockPropsInput,\n\tResolvePreRenderedCodeBlockPropsResult,\n\tResolvedPreRenderedCodeBlockProps,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"resolve-pre-rendered-props-C-kiaLHj.js","names":[],"sources":["../src/components/code-block/mantle-code.ts","../src/components/code-block/line-numbers.ts","../src/components/code-block/decorate-highlighted-html.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize-indentation.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/parse-line-options.ts","../src/components/code-block/resolve-pre-rendered-props.ts"],"sourcesContent":["import type { SupportedLanguage } from \"../code-block/supported-languages.js\";\nimport type { LineRange } from \"../code-block/line-numbers.js\";\nimport type { Indentation } from \"../code-block/indentation.js\";\n\n/** Languages that represent shell/terminal commands. */\nconst shellLanguages = new Set<SupportedLanguage>([\"bash\", \"sh\", \"shell\"]);\n\n/** Returns the default `showLineNumbers` value for a given language and code string. Single-line shell snippets default to `false`; everything else defaults to `true`. */\nfunction defaultShowLineNumbers(language: SupportedLanguage, code: string): boolean {\n\tif (shellLanguages.has(language) && !code.trim().includes(\"\\n\")) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\nconst mantleCodeBlockValueBrand: unique symbol = Symbol(\"MantleCodeBlockValue\");\n\n/**\n * The value produced by `mantleCode()`. Contains pre-rendered Shiki HTML (injected\n * by the Vite plugin at build time) and the original code string for the copy button.\n *\n * `~preHtml` is required at render time. Runtime syntax highlighting is intentionally\n * unsupported; only placeholder substitution for interpolated values is performed.\n */\ntype MantleCodeBlockValue = {\n\t/**\n\t * Nominal type brand to prevent accidental use of plain objects.\n\t */\n\t[mantleCodeBlockValueBrand]: true;\n\t/**\n\t * The language used for syntax highlighting.\n\t */\n\tlanguage: SupportedLanguage;\n\t/**\n\t * The original code string (used by the copy button).\n\t */\n\tcode: string;\n\t/**\n\t * Fully pre-rendered Shiki HTML injected by the Vite plugin or server highlighter.\n\t * This must be present for rendering.\n\t *\n\t * **Security:** This HTML is injected via `dangerouslySetInnerHTML`. It must\n\t * come from a trusted source (Shiki output from the Vite plugin or\n\t * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input.\n\t */\n\t\"~preHtml\"?: string | undefined;\n\t/**\n\t * Runtime values used to replace `SHIKI_VAL_N` placeholders in `~preHtml`.\n\t * This enables interpolated template expressions while preserving build-time highlighting.\n\t */\n\t\"~preVals\"?: unknown[] | undefined;\n\t/**\n\t * Placeholder token prefix used by the Vite transform for interpolated values.\n\t * When omitted, CodeBlock falls back to the legacy `SHIKI_VAL_<n>` format.\n\t */\n\t\"~preValToken\"?: string | undefined;\n\t/**\n\t * Optional default for line-number rendering when this value is displayed.\n\t */\n\t\"~showLineNumbers\"?: boolean | undefined;\n\t/**\n\t * Optional default highlighted line numbers/ranges when this value is displayed.\n\t */\n\t\"~highlightLines\"?: (LineRange | number)[] | undefined;\n\t/**\n\t * Optional default start line number when line numbers are displayed.\n\t * @default 1\n\t */\n\t\"~lineNumberStart\"?: number | undefined;\n};\n\n/** Maps each key starting with `OldPrefix` to `NewPrefix`, leaving other keys unchanged. */\ntype ReplacePrefix<T, OldPrefix extends string, NewPrefix extends string> = {\n\t[K in keyof T as K extends `${OldPrefix}${infer Rest}` ? `${NewPrefix}${Rest}` : K]: T[K];\n};\n\n/** Public input shape for `createMantleCodeBlockValue`, with `~`-prefixed keys renamed to unprefixed. */\ntype MantleCodeBlockValueInput = ReplacePrefix<\n\tOmit<MantleCodeBlockValue, typeof mantleCodeBlockValueBrand>,\n\t\"~\",\n\t\"\"\n>;\n\n/** Options for configuring line numbers, highlights, and indentation in `mantleCode()`. */\ntype MantleCodeOptions = {\n\t/** Line numbers or ranges to visually highlight in the code block. */\n\thighlightLines?: (LineRange | number)[] | undefined;\n\t/** The indentation style to use when normalizing the code string. */\n\tindentation?: Indentation | undefined;\n\t/**\n\t * The starting line number when line numbers are displayed.\n\t * @default 1\n\t */\n\tlineNumberStart?: number | undefined;\n\t/**\n\t * Whether to show line numbers in the code block. Defaults to `true` for most\n\t * languages, but `false` for single-line shell snippets (`bash`, `sh`, `shell`).\n\t */\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Creates a `MantleCodeBlockValue` for use with `CodeBlock.Code`.\n *\n * **Security:** The `preHtml` field is rendered via `dangerouslySetInnerHTML`.\n * Only pass HTML produced by Shiki (via the Vite plugin or\n * `createMantleServerSyntaxHighlighter`). Never pass unsanitized user input as `preHtml`.\n */\nfunction createMantleCodeBlockValue({\n\tpreHtml,\n\tpreValToken,\n\tpreVals,\n\thighlightLines,\n\tlineNumberStart,\n\tshowLineNumbers,\n\tcode,\n\tlanguage,\n}: MantleCodeBlockValueInput): MantleCodeBlockValue {\n\treturn {\n\t\t[mantleCodeBlockValueBrand]: true,\n\t\tlanguage,\n\t\tcode,\n\t\t\"~preHtml\": preHtml,\n\t\t\"~preValToken\": preValToken,\n\t\t\"~preVals\": preVals,\n\t\t\"~highlightLines\": highlightLines,\n\t\t\"~lineNumberStart\": lineNumberStart,\n\t\t\"~showLineNumbers\": showLineNumbers,\n\t};\n}\n\n/** Joins a `TemplateStringsArray` and its interpolated values into a single code string. */\nfunction buildCodeFromTemplate(strings: TemplateStringsArray, values: unknown[]): string {\n\tlet code = \"\";\n\tfor (let index = 0; index < strings.length; index += 1) {\n\t\tcode += strings[index] ?? \"\";\n\t\tif (index < values.length) {\n\t\t\tcode += String(values[index]);\n\t\t}\n\t}\n\treturn code;\n}\n\n/**\n * Tagged template literal for Shiki syntax highlighting.\n *\n * Returns a `MantleCodeBlockValue` that `CodeBlock.Code` renders.\n * The Vite transform plugin rewrites calls to this function at build time,\n * inlining pre-rendered Shiki HTML so that no highlighting work happens in the browser.\n * Configure it via `mantleCodeBlockPlugins()` in `vite.config.ts`.\n *\n * Interpolated template expressions are supported via placeholder substitution.\n *\n * Line numbers are shown by default (`showLineNumbers` defaults to `true`),\n * except for single-line shell snippets (`bash`, `sh`, `shell`) where they default to `false`.\n *\n * @example\n * ```tsx\n * // Static string (line numbers shown by default)\n * mantleCode(\"typescript\")`const x: string = \"hello\";`\n * // Interpolated string\n * mantleCode(\"typescript\")`const greeting = \"Hello, ${name}!\";`\n * // Disable line numbers\n * mantleCode(\"typescript\", { showLineNumbers: false })`const x = 1;`\n * // Single-line shell — line numbers hidden by default\n * mantleCode(\"bash\")`npm install @ngrok/mantle`\n * ```\n */\nfunction mantleCode(\n\tlanguage: SupportedLanguage,\n\toptions: MantleCodeOptions = {},\n): (strings: TemplateStringsArray, ...values: unknown[]) => MantleCodeBlockValue {\n\tconst { showLineNumbers, highlightLines, lineNumberStart } = options;\n\n\treturn (strings, ...values) => {\n\t\tconst code = buildCodeFromTemplate(strings, values);\n\n\t\treturn createMantleCodeBlockValue({\n\t\t\tlanguage,\n\t\t\tcode,\n\t\t\tpreHtml: undefined,\n\t\t\tpreVals: values.length > 0 ? values : undefined,\n\t\t\thighlightLines,\n\t\t\tlineNumberStart,\n\t\t\tshowLineNumbers: showLineNumbers ?? defaultShowLineNumbers(language, code),\n\t\t});\n\t};\n}\n\nexport { defaultShowLineNumbers, mantleCode };\nexport { createMantleCodeBlockValue };\nexport type { MantleCodeBlockValue, MantleCodeOptions };\n","/**\n * A line range is a string in the format of `start-end` where `start` and `end` are line numbers.\n */\nexport type LineRange = `${number}-${number}`;\n\nconst MAX_EXPANDED_LINE_RANGE_LENGTH = 1_000;\n\n/**\n * Given a list of line ranges and numbers, resolves them into a unique list of line numbers as a set.\n *\n * @example\n * ```tsx\n * const highlightedLines = resolveLineNumbers(1, \"3-5\", 7, \"10-12\");\n * // Returns: Set {1, 3, 4, 5, 7, 10, 11, 12}\n *\n * const singleLine = resolveLineNumbers(42);\n * // Returns: Set {42}\n * ```\n */\nexport function resolveLineNumbers(...items: (LineRange | number)[]): Set<number> {\n\tconst lineNumberSet = new Set<number>();\n\n\tfor (const item of items) {\n\t\tif (typeof item === \"number\") {\n\t\t\tif (!isPositiveLineNumber(item)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// only support integer line numbers\n\t\t\tconst int = Math.floor(item);\n\t\t\tlineNumberSet.add(int);\n\t\t} else {\n\t\t\tconst separatorIndex = item.indexOf(\"-\");\n\t\t\tconst startPart = item.slice(0, separatorIndex);\n\t\t\tconst endPart = item.slice(separatorIndex + 1);\n\t\t\tlet start = Number.parseInt(startPart, 10);\n\t\t\tlet end = Number.parseInt(endPart, 10);\n\n\t\t\t// ignore invalid ranges that don't contain valid line numbers\n\t\t\tif (!isPositiveLineNumber(start) || !isPositiveLineNumber(end)) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// swap start and end if they are backwards\n\t\t\tif (start > end) {\n\t\t\t\t[start, end] = [end, start];\n\t\t\t}\n\n\t\t\tif (end - start + 1 > MAX_EXPANDED_LINE_RANGE_LENGTH) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// add all line numbers in the range, inclusive\n\t\t\tfor (let i = start; i <= end; i++) {\n\t\t\t\tlineNumberSet.add(i);\n\t\t\t}\n\t\t}\n\t}\n\n\treturn lineNumberSet;\n}\n\n/**\n * Type Predicate: checks if a value is a positive, finite integer.\n */\nconst isPositiveLineNumber = (value: number | undefined): value is number =>\n\tvalue != null && !Number.isNaN(value) && value > 0 && Number.isFinite(value);\n","import type { LineRange } from \"./line-numbers.js\";\nimport { resolveLineNumbers } from \"./line-numbers.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/** Removes trailing `\\n` and `\\r` characters from the end of a string. */\nfunction trimTrailingNewlines(input: string): string {\n\tlet end = input.length;\n\twhile (end > 0 && (input.charCodeAt(end - 1) === 10 || input.charCodeAt(end - 1) === 13)) {\n\t\tend -= 1;\n\t}\n\treturn end === input.length ? input : input.slice(0, end);\n}\n\n/** Splits Shiki-highlighted HTML into per-line content, unwrapping `<span class=\"line\">` wrappers. */\nfunction splitHighlightedHtmlIntoLines(html: string): string[] {\n\tconst normalizedHtml = trimTrailingNewlines(html).replaceAll(\"\\r\\n\", \"\\n\").replaceAll(\"\\r\", \"\\n\");\n\tconst shikiLines = normalizedHtml.split(\"\\n\");\n\tconst linePrefix = '<span class=\"line\">';\n\tconst lineSuffix = \"</span>\";\n\n\tfor (let i = 0; i < shikiLines.length; i++) {\n\t\tconst line = shikiLines[i] ?? \"\";\n\t\tif (line.startsWith(linePrefix) && line.endsWith(lineSuffix)) {\n\t\t\tshikiLines[i] = line.slice(linePrefix.length, line.length - lineSuffix.length);\n\t\t}\n\t}\n\n\treturn shikiLines;\n}\n\n/** Input for {@link decorateHighlightedHtml}. */\ntype DecorateHighlightedHtmlInput = {\n\thighlightLines?: (LineRange | number)[] | undefined;\n\thtml: string;\n\tlineNumberStart?: number | undefined;\n\tshowLineNumbers?: boolean | undefined;\n};\n\n/**\n * Wraps each line of Shiki-highlighted HTML in Mantle's line-number and\n * line-highlight markup, producing the final HTML rendered by `CodeBlock.Code`.\n */\nfunction decorateHighlightedHtml({\n\thighlightLines,\n\thtml,\n\tlineNumberStart = 1,\n\tshowLineNumbers = false,\n}: DecorateHighlightedHtmlInput): string {\n\tconst highlightedLineNumbers = resolveLineNumbers(...(highlightLines ?? []));\n\tconst lines = splitHighlightedHtmlIntoLines(html);\n\tlet output = \"\";\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i] ?? \"\";\n\t\tconst lineNumber = lineNumberStart + i;\n\t\tconst lineClassName = cx(\n\t\t\t\"mantle-code-line\",\n\t\t\thighlightedLineNumbers.has(lineNumber) && \"mantle-code-line-highlighted\",\n\t\t);\n\n\t\tconst lineNumberHtml = showLineNumbers\n\t\t\t? `<span class=\"mantle-code-line-number\" data-slot=\"line-number\">${lineNumber}</span>`\n\t\t\t: \"\";\n\n\t\toutput += `<span class=\"${lineClassName}\" data-line-number=\"${lineNumber}\">${lineNumberHtml}<span class=\"mantle-code-line-content\" data-slot=\"line-content\">${line === \"\" ? \" \" : line}</span></span>`;\n\t}\n\treturn output;\n}\n\nexport { decorateHighlightedHtml };\nexport type { DecorateHighlightedHtmlInput };\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\nconst tabIndentedLanguageSet = new Set<string>(tabIndentedLanguages);\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\nconst spaceIndentedLanguageSet = new Set<string>(spaceIndentedLanguages);\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(value: SupportedLanguage): value is TabIndentedLanguage {\n\treturn tabIndentedLanguageSet.has(value);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(value: SupportedLanguage): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguageSet.has(value);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst indentation = options?.indentation ?? \"spaces\";\n\tconst normalizedLineEndings = value.replace(/\\r\\n?/g, \"\\n\");\n\tconst trimmed = normalizedLineEndings.trim();\n\n\tif (trimmed === \"\") {\n\t\treturn \"\";\n\t}\n\n\tconst minIndent = findMinIndent(normalizedLineEndings);\n\tconst lines = trimmed.split(\"\\n\");\n\tconst normalizedLines = new Array<string>(lines.length);\n\n\tfor (let i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i];\n\t\tif (line == null) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst dedentedLine = startsWithNonWhitespace(line) ? line : line.slice(minIndent);\n\t\tnormalizedLines[i] = normalizeLeadingIndentation(dedentedLine, indentation);\n\t}\n\n\treturn normalizedLines.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n\n/**\n * Rewrites only the leading indentation of a non-empty line into the requested\n * indentation style, leaving the rest of the line untouched.\n */\nfunction normalizeLeadingIndentation(line: string, indentation: Indentation): string {\n\tlet indentEnd = 0;\n\twhile (indentEnd < line.length) {\n\t\tconst character = line[indentEnd];\n\t\tif (character !== \" \" && character !== \"\\t\") {\n\t\t\tbreak;\n\t\t}\n\t\tindentEnd += 1;\n\t}\n\n\tif (indentEnd === 0 || indentEnd === line.length) {\n\t\treturn line;\n\t}\n\n\tconst leadingWhitespace = line.slice(0, indentEnd);\n\tconst normalizedLeadingWhitespace =\n\t\tindentation === \"spaces\"\n\t\t\t? leadingWhitespace.replace(/\\t/g, \" \")\n\t\t\t: leadingWhitespace.replace(/ {2}/g, \"\\t\");\n\n\treturn normalizedLeadingWhitespace + line.slice(indentEnd);\n}\n\n/**\n * Returns true when a line begins with visible content instead of indentation.\n */\nfunction startsWithNonWhitespace(line: string): boolean {\n\tconst firstCharacter = line[0];\n\treturn firstCharacter != null && firstCharacter !== \" \" && firstCharacter !== \"\\t\";\n}\n\n/**\n * Find the shortest indentation of a multiline string.\n */\nfunction findMinIndent(value: string): number {\n\tlet minIndent = Number.POSITIVE_INFINITY;\n\tlet indent = 0;\n\tlet atLineStart = true;\n\n\tfor (let i = 0; i < value.length; i++) {\n\t\tconst char = value[i];\n\n\t\tif (atLineStart) {\n\t\t\tif (char === \" \" || char === \"\\t\") {\n\t\t\t\tindent += 1;\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\t\tindent = 0;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (indent < minIndent) {\n\t\t\t\tminIndent = indent;\n\t\t\t\tif (minIndent === 0) {\n\t\t\t\t\treturn 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\tatLineStart = false;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (char === \"\\n\" || char === \"\\r\") {\n\t\t\tatLineStart = true;\n\t\t\tindent = 0;\n\t\t}\n\t}\n\n\treturn minIndent === Number.POSITIVE_INFINITY ? 0 : minIndent;\n}\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\nconst supportedLanguageSet = new Set<SupportedLanguage>(supportedLanguages);\nconst defaultLanguage = \"text\" satisfies SupportedLanguage;\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"text\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tconst trimmed = value?.trim() ?? \"\";\n\tif (!trimmed) {\n\t\treturn defaultLanguage;\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst prefixSeparatorIndex = trimmed.indexOf(\"-\");\n\tconst maybeLanguage =\n\t\tprefixSeparatorIndex === -1 ? trimmed : trimmed.slice(prefixSeparatorIndex + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : defaultLanguage;\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn typeof value === \"string\" && supportedLanguageSet.has(value as SupportedLanguage);\n};\n\nexport {\n\t//,\n\tisSupportedLanguage,\n\tparseLanguage,\n};\n\nexport type { SupportedLanguage };\n","import type { LineRange } from \"./line-numbers.js\";\n\n/** Parses a boolean or `\"true\"`/`\"false\"` string into a boolean. Returns `undefined` for unrecognized values. */\nfunction parseCodeBlockShowLineNumbers(value: unknown): boolean | undefined {\n\tif (typeof value === \"boolean\") {\n\t\treturn value;\n\t}\n\tif (typeof value === \"string\") {\n\t\tif (value === \"true\") {\n\t\t\treturn true;\n\t\t}\n\t\tif (value === \"false\") {\n\t\t\treturn false;\n\t\t}\n\t}\n\treturn undefined;\n}\n\n/** Parses a positive integer (or its string representation) for the starting line number. Returns `undefined` for invalid values. */\nfunction parseCodeBlockLineNumberStart(value: unknown): number | undefined {\n\tif (typeof value === \"number\" && Number.isFinite(value) && value > 0) {\n\t\treturn Math.floor(value);\n\t}\n\tif (typeof value === \"string\" && /^\\d+$/.test(value)) {\n\t\tconst parsed = Number.parseInt(value, 10);\n\t\treturn parsed > 0 ? parsed : undefined;\n\t}\n\treturn undefined;\n}\n\n/** Parses highlight line specifications from an array or comma-separated string (e.g. `[1, \"3-5\"]` or `\"1,3-5\"`). Returns `undefined` when no valid entries are found. */\nfunction parseCodeBlockHighlightLines(value: unknown): (LineRange | number)[] | undefined {\n\tconst parseSingle = (item: unknown): LineRange | number | undefined => {\n\t\tif (typeof item === \"number\") {\n\t\t\treturn Number.isFinite(item) && item > 0 ? Math.floor(item) : undefined;\n\t\t}\n\t\tif (typeof item === \"string\") {\n\t\t\tconst trimmed = item.trim();\n\t\t\tif (/^\\d+$/.test(trimmed)) {\n\t\t\t\tconst parsed = Number.parseInt(trimmed, 10);\n\t\t\t\treturn parsed > 0 ? parsed : undefined;\n\t\t\t}\n\t\t\tif (/^\\d+-\\d+$/.test(trimmed)) {\n\t\t\t\tconst [startStr, endStr] = trimmed.split(\"-\");\n\t\t\t\tconst start = Number.parseInt(startStr ?? \"\", 10);\n\t\t\t\tconst end = Number.parseInt(endStr ?? \"\", 10);\n\t\t\t\tif (start > 0 && end > 0) {\n\t\t\t\t\treturn trimmed as LineRange;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t}\n\t\treturn undefined;\n\t};\n\n\tif (typeof value === \"string\") {\n\t\tconst parsed: (LineRange | number)[] = [];\n\t\tconst segments = value.split(\",\");\n\t\tfor (const segment of segments) {\n\t\t\tconst maybe = parseSingle(segment);\n\t\t\tif (maybe != null) {\n\t\t\t\tparsed.push(maybe);\n\t\t\t}\n\t\t}\n\t\treturn parsed.length > 0 ? parsed : undefined;\n\t}\n\n\tif (!Array.isArray(value)) {\n\t\treturn undefined;\n\t}\n\tconst parsed: (LineRange | number)[] = [];\n\tfor (const item of value) {\n\t\tconst maybe = parseSingle(item);\n\t\tif (maybe != null) {\n\t\t\tparsed.push(maybe);\n\t\t}\n\t}\n\treturn parsed.length > 0 ? parsed : undefined;\n}\n\nexport {\n\t//,\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\nimport { isSupportedLanguage } from \"./supported-languages.js\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\nimport {\n\tparseCodeBlockHighlightLines,\n\tparseCodeBlockLineNumberStart,\n\tparseCodeBlockShowLineNumbers,\n} from \"./parse-line-options.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\n/** The visual mode preset for a code block (determines header icon). */\ntype Mode = (typeof modes)[number];\n\n/** User-facing input shape for code block metadata (metastring key-value pairs). */\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\n/** Resolved code block metadata with defaults applied. */\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\n/** The type of the default metadata constant. */\ntype DefaultMeta = typeof defaultMeta;\n\n/** Parses a code fence metastring (e.g. `title=\"example\" collapsible`) into a structured `Meta` object. */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson: Record<string, unknown> = {};\n\tconst tokens = tokenizeMetastring(metastring);\n\tfor (const token of tokens) {\n\t\tconst separatorIndex = token.indexOf(\"=\");\n\t\tconst key = separatorIndex === -1 ? token : token.slice(0, separatorIndex);\n\t\tconst value = separatorIndex === -1 ? undefined : token.slice(separatorIndex + 1);\n\n\t\tif (!key) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst normalized = normalizeValue(value);\n\t\tmetaJson[key] = normalized ?? true;\n\t}\n\n\treturn parseMetaJson(metaJson);\n}\n\n/** Strips surrounding double-quotes and trims whitespace from a metastring value. */\nfunction normalizeValue(value: string | undefined) {\n\tif (value == null) {\n\t\treturn undefined;\n\t}\n\tconst trimmed = value.trim();\n\tconst lastIndex = trimmed.length - 1;\n\tif (lastIndex >= 1 && trimmed.charCodeAt(0) === 34 && trimmed.charCodeAt(lastIndex) === 34) {\n\t\treturn trimmed.slice(1, lastIndex);\n\t}\n\treturn trimmed;\n}\n\n/** Splits a metastring into whitespace-delimited tokens, respecting double-quoted segments. */\nfunction tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet current = \"\";\n\tlet inQuotes = false;\n\n\tfor (let i = 0; i < input.length; i++) {\n\t\tconst char = input[i] ?? \"\";\n\t\tif (!inQuotes && isMetastringWhitespace(char)) {\n\t\t\tif (current) {\n\t\t\t\tresult.push(current);\n\t\t\t\tcurrent = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrent += char;\n\t\t} else {\n\t\t\tcurrent += char;\n\t\t}\n\t}\n\n\tif (current) {\n\t\tresult.push(current);\n\t}\n\n\treturn result;\n}\n\n/** Returns `true` for the ASCII whitespace characters a metastring may use to separate tokens. */\nfunction isMetastringWhitespace(char: string): boolean {\n\treturn char === \" \" || char === \"\\t\" || char === \"\\n\" || char === \"\\r\";\n}\n\n/** Type predicate: checks if a value is a valid code block `Mode`. */\nfunction isMode(input: unknown): input is Mode {\n\treturn input === \"cli\" || input === \"file\" || input === \"traffic-policy\";\n}\n\n/** Converts a raw key-value record (from tokenized metastring) into a validated `Meta` object. */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation) ? indentation : defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n\n/** Props that the rehype plugin attaches to `<pre>` elements for pre-rendered code blocks. */\ntype ResolvePreRenderedCodeBlockPropsInput = {\n\tcollapsible?: unknown;\n\tdisableCopy?: unknown;\n\tmantleCode?: unknown;\n\tmantleCollapsible?: unknown;\n\tmantleDisableCopy?: unknown;\n\tmantleHighlightLines?: unknown;\n\tmantleLanguage?: unknown;\n\tmantleLineNumberStart?: unknown;\n\tmantleMode?: unknown;\n\tmantlePreHtml?: unknown;\n\tmantleShowLineNumbers?: unknown;\n\tmantleTitle?: unknown;\n\tmode?: unknown;\n\ttitle?: unknown;\n};\n\n/** Combined input type for a `<pre>` element that may carry both metastring and pre-rendered props. */\ntype CodeBlockPreElementInput = MetaInput & ResolvePreRenderedCodeBlockPropsInput;\n\ntype PreRenderedCodeBlockPropKey = keyof ResolvePreRenderedCodeBlockPropsInput;\n\n/** Normalized code block props extracted from pre-rendered `<pre>` element attributes. */\ntype ResolvedPreRenderedCodeBlockProps = {\n\tcode: string | undefined;\n\tcollapsible: boolean | undefined;\n\tdisableCopy: boolean | undefined;\n\thighlightLines: (number | `${number}-${number}`)[] | undefined;\n\tlanguage: SupportedLanguage | undefined;\n\tlineNumberStart: number | undefined;\n\tmode: Mode | undefined;\n\tpreHtml: string | undefined;\n\trawLanguage: unknown;\n\tshowLineNumbers: boolean | undefined;\n\ttitle: string | undefined;\n};\n\n/** Result of {@link resolvePreRenderedCodeBlockProps}: extracted Mantle props and remaining pass-through props. */\ntype ResolvePreRenderedCodeBlockPropsResult<T extends Record<string, unknown>> = {\n\tmantleCode: ResolvedPreRenderedCodeBlockProps | undefined;\n\tprops: Omit<T, PreRenderedCodeBlockPropKey>;\n};\n\n/**\n * Extracts and normalizes `mantle*` props from a `<pre>` element's attributes,\n * separating them from pass-through props. Returns `undefined` for the Mantle\n * payload when no pre-rendered attributes are present.\n */\nfunction resolvePreRenderedCodeBlockProps<\n\tT extends ResolvePreRenderedCodeBlockPropsInput & Record<string, unknown>,\n>(input: T): ResolvePreRenderedCodeBlockPropsResult<T> {\n\tconst {\n\t\tcollapsible,\n\t\tdisableCopy,\n\t\tmantleCode,\n\t\tmantleCollapsible,\n\t\tmantleDisableCopy,\n\t\tmantleHighlightLines,\n\t\tmantleLanguage,\n\t\tmantleLineNumberStart,\n\t\tmantleMode,\n\t\tmantlePreHtml,\n\t\tmantleShowLineNumbers,\n\t\tmantleTitle,\n\t\tmode,\n\t\ttitle,\n\t\t...props\n\t} = input;\n\n\tconst hasPayload =\n\t\tmantleLanguage != null ||\n\t\tmantleCode != null ||\n\t\tmantlePreHtml != null ||\n\t\tmantleShowLineNumbers != null ||\n\t\tmantleHighlightLines != null ||\n\t\tmantleLineNumberStart != null ||\n\t\tmantleCollapsible != null ||\n\t\tmantleDisableCopy != null ||\n\t\tmantleMode != null ||\n\t\tmantleTitle != null;\n\n\tif (!hasPayload) {\n\t\treturn {\n\t\t\tmantleCode: undefined,\n\t\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t\t};\n\t}\n\n\treturn {\n\t\tmantleCode: {\n\t\t\tcode: typeof mantleCode === \"string\" ? mantleCode : undefined,\n\t\t\tcollapsible:\n\t\t\t\t(typeof mantleCollapsible === \"string\" || typeof mantleCollapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleCollapsible)\n\t\t\t\t\t: undefined) ??\n\t\t\t\t(typeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t\t: undefined),\n\t\t\tdisableCopy:\n\t\t\t\ttypeof mantleDisableCopy === \"string\" || typeof mantleDisableCopy === \"boolean\"\n\t\t\t\t\t? parseBooleanish(mantleDisableCopy)\n\t\t\t\t\t: typeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t\t\t: undefined,\n\t\t\thighlightLines: parseCodeBlockHighlightLines(mantleHighlightLines),\n\t\t\tlanguage:\n\t\t\t\ttypeof mantleLanguage === \"string\" && isSupportedLanguage(mantleLanguage)\n\t\t\t\t\t? mantleLanguage\n\t\t\t\t\t: undefined,\n\t\t\tlineNumberStart: parseCodeBlockLineNumberStart(mantleLineNumberStart),\n\t\t\tmode: isMode(mantleMode) ? mantleMode : isMode(mode) ? mode : undefined,\n\t\t\tpreHtml: typeof mantlePreHtml === \"string\" ? mantlePreHtml : undefined,\n\t\t\trawLanguage: mantleLanguage,\n\t\t\tshowLineNumbers: parseCodeBlockShowLineNumbers(mantleShowLineNumbers),\n\t\t\ttitle:\n\t\t\t\ttypeof mantleTitle === \"string\"\n\t\t\t\t\t? mantleTitle.trim()\n\t\t\t\t\t: typeof title === \"string\"\n\t\t\t\t\t\t? title.trim()\n\t\t\t\t\t\t: undefined,\n\t\t},\n\t\tprops: props as Omit<T, PreRenderedCodeBlockPropKey>,\n\t};\n}\n\nexport { resolvePreRenderedCodeBlockProps };\nexport {\n\t//,\n\tdefaultMeta,\n\tnormalizeValue,\n\tparseMetastring,\n\ttokenizeMetastring,\n};\n\nexport type {\n\tCodeBlockPreElementInput,\n\tDefaultMeta,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tResolvePreRenderedCodeBlockPropsInput,\n\tResolvePreRenderedCodeBlockPropsResult,\n\tResolvedPreRenderedCodeBlockProps,\n};\n"],"mappings":"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"}
|
package/dist/{resolve-pre-rendered-props-x-52gvQ1.d.ts → resolve-pre-rendered-props-CNUnH1fU.d.ts}
RENAMED
|
@@ -56,7 +56,7 @@ declare function isIndentation(input: unknown): input is Indentation;
|
|
|
56
56
|
* @param language - The language to check.
|
|
57
57
|
* @param preferredIndentation - The preferred indentation type (overrides what is detected).
|
|
58
58
|
*/
|
|
59
|
-
declare function inferIndentation(language: SupportedLanguage, preferredIndentation: Indentation | undefined): "
|
|
59
|
+
declare function inferIndentation(language: SupportedLanguage, preferredIndentation: Indentation | undefined): "spaces" | "tabs";
|
|
60
60
|
//#endregion
|
|
61
61
|
//#region src/components/code-block/normalize-indentation.d.ts
|
|
62
62
|
type Options = {
|
|
@@ -282,4 +282,4 @@ type ResolvePreRenderedCodeBlockPropsResult<T extends Record<string, unknown>> =
|
|
|
282
282
|
declare function resolvePreRenderedCodeBlockProps<T extends ResolvePreRenderedCodeBlockPropsInput & Record<string, unknown>>(input: T): ResolvePreRenderedCodeBlockPropsResult<T>;
|
|
283
283
|
//#endregion
|
|
284
284
|
export { DecorateHighlightedHtmlInput as A, Indentation as C, isSupportedLanguage as D, SupportedLanguage as E, LineRange as M, parseLanguage as O, normalizeIndentation as S, isIndentation as T, MantleCodeBlockValue as _, Mode as a, defaultShowLineNumbers as b, ResolvedPreRenderedCodeBlockProps as c, parseMetastring as d, resolvePreRenderedCodeBlockProps as f, parseCodeBlockShowLineNumbers as g, parseCodeBlockLineNumberStart as h, MetaInput as i, decorateHighlightedHtml as j, supportedLanguages as k, defaultMeta as l, parseCodeBlockHighlightLines as m, DefaultMeta as n, ResolvePreRenderedCodeBlockPropsInput as o, tokenizeMetastring as p, Meta as r, ResolvePreRenderedCodeBlockPropsResult as s, CodeBlockPreElementInput as t, normalizeValue as u, MantleCodeOptions as v, inferIndentation as w, mantleCode as x, createMantleCodeBlockValue as y };
|
|
285
|
-
//# sourceMappingURL=resolve-pre-rendered-props-
|
|
285
|
+
//# sourceMappingURL=resolve-pre-rendered-props-CNUnH1fU.d.ts.map
|