@ngrok/mantle 0.26.0 → 0.27.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.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport { Copy } from \"@phosphor-icons/react/Copy\";\nimport { FileText } from \"@phosphor-icons/react/FileText\";\nimport { Terminal } from \"@phosphor-icons/react/Terminal\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFile } from \"../icons/traffic-policy-file.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlock = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nCodeBlock.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlockCode` and optional\n * `CodeBlockCopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockBody = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode\n * language=\"sh\"\n * value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n * />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockCode = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst languageClassName = formatLanguageClassName(language);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-14\",\n\t\t\t\t\t\"text-size-inherit text-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName={clsx(\"text-size-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCodeBlockCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where things like the\n * `CodeBlockIcon` and `CodeBlockTitle` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockHeader = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCodeBlockHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockTitle = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCodeBlockTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlockBody` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockCopyButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockCopyButtonProps\n>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"-ml-px size-5 shrink-0\" />\n\t\t\t\t)}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCodeBlockCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n * `CodeBlockBody` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<CaretDown\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4 shrink-0\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t\tweight=\"bold\"\n\t\t\t/>\n\t\t</Component>\n\t);\n});\nCodeBlockExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t }\n\t);\n\n/**\n * A small icon that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nfunction CodeBlockIcon({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileText weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <Terminal weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFile />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn <Icon className={className} svg={svg} {...props} />;\n}\n\nexport {\n\tCodeBlock,\n\tCodeBlockBody,\n\tCodeBlockCode,\n\tCodeBlockCopyButton,\n\tCodeBlockExpanderButton,\n\tCodeBlockHeader,\n\tCodeBlockIcon,\n\tCodeBlockTitle,\n};\n","/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp`;\n * - \\< => `&lt`;\n * - \\> => `&gt`;\n * - \\\" => `&quot`;\n * - \\' => `&#39`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet escaped = \"\";\n\tfor (const character of value) {\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\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};\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\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\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(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\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 = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \" \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\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\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\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];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\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 (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { z } from \"zod\";\nimport { indentations } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\nconst metaSchema = z.object({\n\tcollapsible: z.boolean().default(false),\n\tdisableCopy: z.boolean().default(false),\n\tmode: z.enum(modes).optional(),\n\ttitle: z.string().trim().optional(),\n\tindentation: z.enum(indentations).optional(),\n});\n\ntype MetaInput = z.input<typeof metaSchema>;\n\ntype Meta = z.infer<typeof metaSchema>;\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tmode: undefined,\n\ttitle: undefined,\n\tindentation: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(value: string | undefined): Meta {\n\tconst metastring = value?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, _value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst value = normalizeValue(_value);\n\t\tacc[key] = value ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = metaSchema.parse(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n"],"mappings":"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","names":["CaretDown","Check","Copy","FileText","Terminal","Slot","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","CodeBlock","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","CodeBlockBody","CodeBlockCode","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","CodeBlockHeader","CodeBlockTitle","CodeBlockCopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Check","Copy","CodeBlockExpanderButton","prev","CaretDown","CodeBlockIcon","preset","_svgProp","svg","FileText","Terminal","TrafficPolicyFile","Icon","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","z","modes","metaSchema","z","indentations","defaultMeta","parseMetastring","value","metastring","metaJson","tokenizeMetastring","acc","token","key","_value","normalizeValue","parsed","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char"]}
1
+ {"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport { Copy } from \"@phosphor-icons/react/Copy\";\nimport { FileText } from \"@phosphor-icons/react/FileText\";\nimport { Terminal } from \"@phosphor-icons/react/Terminal\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFile } from \"../icons/traffic-policy-file.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlock = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nCodeBlock.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlockCode` and optional\n * `CodeBlockCopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockBody = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nCodeBlockBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode\n * language=\"sh\"\n * value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n * />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockCode = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst languageClassName = formatLanguageClassName(language);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] overflow-x-auto overflow-y-hidden p-4 pr-14\",\n\t\t\t\t\t\"text-size-inherit text-size-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName={clsx(\"text-size-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCodeBlockCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where things like the\n * `CodeBlockIcon` and `CodeBlockTitle` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockHeader = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCodeBlockHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockTitle = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-size-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCodeBlockTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlockBody` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockCopyButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockCopyButtonProps\n>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<Copy className=\"-ml-px size-5 shrink-0\" />\n\t\t\t\t)}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCodeBlockCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n * `CodeBlockBody` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nconst CodeBlockExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<CaretDown\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4 shrink-0\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t\tweight=\"bold\"\n\t\t\t/>\n\t\t</Component>\n\t);\n});\nCodeBlockExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t }\n\t);\n\n/**\n * A small icon that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock>\n * <CodeBlockHeader>\n * <CodeBlockIcon preset=\"file\" />\n * <CodeBlockTitle>…</CodeBlockTitle>\n * </CodeBlockHeader>\n * <CodeBlockBody>\n * <CodeBlockCopyButton />\n * <CodeBlockCode language=\"…\" value={fmtCode\\`…\\`} />\n * </CodeBlockBody>\n * <CodeBlockExpanderButton />\n * </CodeBlock>\n * ```\n */\nfunction CodeBlockIcon({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileText weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <Terminal weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFile />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn <Icon className={className} svg={svg} {...props} />;\n}\n\nexport {\n\tCodeBlock,\n\tCodeBlockBody,\n\tCodeBlockCode,\n\tCodeBlockCopyButton,\n\tCodeBlockExpanderButton,\n\tCodeBlockHeader,\n\tCodeBlockIcon,\n\tCodeBlockTitle,\n};\n","/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp`;\n * - \\< => `&lt`;\n * - \\> => `&gt`;\n * - \\\" => `&quot`;\n * - \\' => `&#39`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet escaped = \"\";\n\tfor (const character of value) {\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\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};\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\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\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(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\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 = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \" \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\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\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\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];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\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 (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { z } from \"zod\";\nimport { indentations } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\nconst metaSchema = z.object({\n\tcollapsible: z.boolean().default(false),\n\tdisableCopy: z.boolean().default(false),\n\tmode: z.enum(modes).optional(),\n\ttitle: z.string().trim().optional(),\n\tindentation: z.enum(indentations).optional(),\n});\n\ntype MetaInput = z.input<typeof metaSchema>;\n\ntype Meta = z.infer<typeof metaSchema>;\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tmode: undefined,\n\ttitle: undefined,\n\tindentation: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(value: string | undefined): Meta {\n\tconst metastring = value?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, _value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst value = normalizeValue(_value);\n\t\tacc[key] = value ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = metaSchema.parse(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n"],"mappings":"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","names":["CaretDown","Check","Copy","FileText","Terminal","Slot","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","CodeBlock","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","CodeBlockBody","CodeBlockCode","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","CodeBlockHeader","CodeBlockTitle","CodeBlockCopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Check","Copy","CodeBlockExpanderButton","prev","CaretDown","CodeBlockIcon","preset","_svgProp","svg","FileText","Terminal","TrafficPolicyFile","Icon","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","z","modes","metaSchema","z","indentations","defaultMeta","parseMetastring","value","metastring","metaJson","tokenizeMetastring","acc","token","key","_value","normalizeValue","parsed","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char"]}
@@ -1,13 +1,41 @@
1
- import { HeaderContext } from '@tanstack/react-table';
1
+ import { Table as Table$1, HeaderContext, Row } from '@tanstack/react-table';
2
2
  export * from '@tanstack/react-table';
3
- import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import * as react from 'react';
4
4
  import { ComponentProps, ReactNode } from 'react';
5
- import { S as SortingMode } from './direction-A0wepfUT.js';
6
- import { TableHeader } from './table.js';
5
+ import * as react_jsx_runtime from 'react/jsx-runtime';
6
+ import { k as SortingMode } from './direction-veAOo2is.js';
7
+ import { B as Button } from './button-C8eGiHOm.js';
8
+ import { Table, TableHead, TableHeader, TableRow } from './table.js';
9
+ import './deep-non-nullable-SmpSvoSd.js';
10
+ import 'class-variance-authority';
11
+ import 'class-variance-authority/types';
12
+ import './variant-props-oDo2u-We.js';
7
13
 
8
14
  declare const sortDirections: readonly ["asc", "desc", "unsorted"];
9
15
  type SortDirection = (typeof sortDirections)[number];
10
- type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHeader> & Pick<HeaderContext<TData, TValue>, "column"> & {
16
+
17
+ type DataTableProps<TData> = ComponentProps<typeof Table> & {
18
+ table: Table$1<TData>;
19
+ };
20
+ declare function DataTable<TData>({ children, table, ...props }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
21
+ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "icon"> & Pick<HeaderContext<TData, TValue>, "column"> & ({
22
+ /**
23
+ * Disable sorting for this column.
24
+ * It will prevent the sorting direction from being toggled and any icon
25
+ * from being shown.
26
+ */
27
+ disableSorting: true;
28
+ /**
29
+ * Use this to render a custom sort icon for the column if it is sortable
30
+ * and you want to override the default sort icon
31
+ */
32
+ sortIcon?: undefined;
33
+ /**
34
+ * The sorting mode of the column, whether it is alphanumeric or time based.
35
+ */
36
+ sortingMode?: undefined;
37
+ } | {
38
+ disableSorting?: false;
11
39
  /**
12
40
  * Use this to render a custom sort icon for the column if it is sortable
13
41
  * and you want to override the default sort icon
@@ -17,10 +45,10 @@ type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHead
17
45
  * The sorting mode of the column, whether it is alphanumeric or time based.
18
46
  */
19
47
  sortingMode: SortingMode;
20
- };
48
+ });
21
49
  /**
22
- * The header for a column in a data table.
23
- * If the column is sortable, clicking the header will toggle the sorting
50
+ * A sortable button toggle for a column header in a data table.
51
+ * If the column is sortable, clicking the button will toggle the sorting
24
52
  * direction.
25
53
  *
26
54
  * @example
@@ -37,6 +65,22 @@ type DataTableColumnHeaderProps<TData, TValue> = ComponentProps<typeof TableHead
37
65
  * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...
38
66
  * ```
39
67
  */
40
- declare function DataTableHeader<TData, TValue>({ children, className, column, sortIcon: propsSortIcon, sortingMode, ...props }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime.JSX.Element;
68
+ declare function DataTableHeaderSortButton<TData, TValue>({ children, className, column, disableSorting, iconPlacement, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TData, TValue>): react_jsx_runtime.JSX.Element;
69
+ type DataTableHeaderProps = ComponentProps<typeof TableHeader>;
70
+ /**
71
+ * A header for a data table.
72
+ * This is typically used to wrap the `DataTableHeaderSortButton` component.
73
+ */
74
+ declare function DataTableHeader<TData, TValue>({ children, className, ...props }: DataTableHeaderProps): react_jsx_runtime.JSX.Element;
75
+ declare const DataTableBody: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
76
+ type DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, "children">;
77
+ declare function DataTableHead<TData>(props: DataTableHeadProps): react_jsx_runtime.JSX.Element;
78
+ declare function DataTableRows<TData>(): react_jsx_runtime.JSX.Element;
79
+ type DataTableRowProps<TData> = Omit<ComponentProps<typeof TableRow>, "chidlren"> & {
80
+ row: Row<TData>;
81
+ };
82
+ declare function DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>): react_jsx_runtime.JSX.Element;
83
+ type EmptyDataTableRowProps = ComponentProps<typeof TableRow>;
84
+ declare function EmptyDataTableRow<TData>({ children, ...props }: EmptyDataTableRowProps): react_jsx_runtime.JSX.Element;
41
85
 
42
- export { DataTableHeader };
86
+ export { DataTable, DataTableBody, DataTableHead, DataTableHeader, DataTableHeaderSortButton, DataTableRow, DataTableRows, EmptyDataTableRow };
@@ -1,2 +1,2 @@
1
- import{f as D}from"./chunk-QMAGKYIX.js";import{a as f}from"./chunk-FHW7SSNY.js";import{d as l}from"./chunk-GYPSB3OK.js";import{b as p}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as u}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{jsx as s,jsxs as S}from"react/jsx-runtime";var V=[...l,"unsorted"];function m({children:t,className:o,column:e,sortIcon:i,sortingMode:r,...a}){let c=e.getIsSorted(),d=e.getCanSort(),n=d&&typeof c=="string"?c:"unsorted",g=i?.(n)??s(T,{mode:r,direction:n});return s(D,{className:u("px-0",o),...a,children:S(p,{className:"flex justify-start w-full h-full rounded-none",type:"button",appearance:"ghost",priority:"neutral",iconPlacement:"end","data-sort-direction":n,icon:g,onClick:()=>{d&&x(e,r)},children:[n!=="unsorted"&&S("span",{className:"sr-only",children:["Sorted in ",n==="asc"?"ascending":"descending"," ","order"]}),t]})})}function T({direction:t,mode:o,...e}){return t==="unsorted"?null:s(f,{mode:o,direction:t,...e})}function x(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(y(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}function y(t,o){return b(o==="alphanumeric"?["unsorted","asc","desc"]:["unsorted","desc","asc"],t)??"unsorted"}function b(t,o,e){let r=(t.findIndex(a=>a===o)+1)%t.length;return t.at(r)??e}export{m as DataTableHeader};
1
+ import{a as y,b as S,c as g,e as l,f as p,g as C}from"./chunk-YAT4IMMN.js";import{a as m}from"./chunk-FHW7SSNY.js";import{m as f}from"./chunk-GYPSB3OK.js";import{b}from"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as d}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as P}from"@tanstack/react-table";import{createContext as j,useContext as k,useMemo as E}from"react";import A from"tiny-invariant";var V=["unsorted","asc","desc"],v=["unsorted","desc","asc"];function x(t,a){return M(a==="alphanumeric"?V:v,t)??"unsorted"}function M(t,a,e){if(t.length===0)return e;let o=t.findIndex(n=>n===a);if(o===-1)return e;let s=(o+1)%t.length;return t.at(s)??e}import{Fragment as K,jsx as r,jsxs as w}from"react/jsx-runtime";var R=j(null);function u(){let t=k(R);return A(t,"useDataTableContext should only be used within a DataTable child component"),t}function L({children:t,table:a,...e}){let o=E(()=>({table:a}),[a]);return r(R.Provider,{value:o,children:r(y,{...e,children:t})})}function _({children:t,className:a,column:e,disableSorting:o=!1,iconPlacement:s="end",sortingMode:n,sortIcon:I,onClick:B,...N}){let T=e.getIsSorted(),c=!o&&e.getCanSort(),i=c&&typeof T=="string"?T:"unsorted",O=I?.(i)??r(G,{mode:n,direction:i});return w(b,{appearance:"ghost",className:d("flex justify-start w-full h-full rounded-none",a),"data-sort-direction":i,"data-table-header-action":!0,icon:O,iconPlacement:s,onClick:D=>{B?.(D),!D.defaultPrevented&&(!c||o||typeof n>"u"||J(e,n))},priority:"neutral",type:"button",...N,children:[c&&i!=="unsorted"&&w("span",{className:"sr-only",children:["Column sorted in"," ",n==="alphanumeric"?i==="asc"?"ascending":"descending":f(i)," ","order"]}),t]})}function $({children:t,className:a,...e}){return r(p,{className:d("has-[[data-table-header-action]]:px-0",a),...e,children:t})}var h=g;h.displayName="DataTableBody";function q(t){let{table:a}=u();return r(S,{...t,children:a.getHeaderGroups().map(e=>r(l,{children:e.headers.map(o=>o.isPlaceholder?r(p,{},o.id):P(o.column.columnDef.header,o.getContext()))},e.id))})}function z(){let{table:t}=u(),a=t.getRowModel().rows;return r(K,{children:a.map(e=>r(H,{row:e},e.id))})}function H({row:t,...a}){return r(l,{...a,children:t.getVisibleCells().map(e=>P(e.column.columnDef.cell,e.getContext()))})}function F({children:t,...a}){let{table:e}=u(),o=e.getAllColumns().length;return r(l,{...a,children:r(C,{colSpan:o,children:t})})}function G({direction:t,mode:a,...e}){return t==="unsorted"||!a||!t?r("svg",{"aria-hidden":!0,...e}):r(m,{mode:a,direction:t,...e})}function J(t,a){if(!t.getCanSort())return;let e=t.getIsSorted();switch(x(typeof e=="string"?e:"unsorted",a)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{L as DataTable,h as DataTableBody,q as DataTableHead,$ as DataTableHeader,_ as DataTableHeaderSortButton,H as DataTableRow,z as DataTableRows,F as EmptyDataTableRow};
2
2
  //# sourceMappingURL=data-table.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTableHeader,\n} from \"./data-table.js\";\n","import type { Column, HeaderContext } from \"@tanstack/react-table\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\ttype SortingMode,\n\tsortingDirections as baseSortingDirections,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport { TableHeader } from \"../table/table.js\";\n\nconst sortDirections = [...baseSortingDirections, \"unsorted\"] as const;\ntype SortDirection = (typeof sortDirections)[number];\n\ntype DataTableColumnHeaderProps<TData, TValue> = ComponentProps<\n\ttypeof TableHeader\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> & {\n\t\t/**\n\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t * and you want to override the default sort icon\n\t\t */\n\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t/**\n\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t */\n\t\tsortingMode: SortingMode;\n\t};\n\n/**\n * The header for a column in a data table.\n * If the column is sortable, clicking the header will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tsortIcon: propsSortIcon,\n\tsortingMode,\n\t...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propsSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<TableHeader className={cx(\"px-0\", className)} {...props}>\n\t\t\t<Button\n\t\t\t\tclassName=\"flex justify-start w-full h-full rounded-none\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tappearance=\"ghost\"\n\t\t\t\tpriority=\"neutral\"\n\t\t\t\ticonPlacement=\"end\"\n\t\t\t\tdata-sort-direction={sortDirection}\n\t\t\t\ticon={sortIcon}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (!canSort) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{sortDirection !== \"unsorted\" && (\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\tSorted in {sortDirection === \"asc\" ? \"ascending\" : \"descending\"}{\" \"}\n\t\t\t\t\t\torder\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</Button>\n\t\t</TableHeader>\n\t);\n}\n\nexport {\n\t//,\n\tDataTableHeader,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection;\n\tmode: SortingMode;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\") {\n\t\treturn null;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst _sortDirection = column.getIsSorted();\n\tconst sortDirection: SortDirection =\n\t\ttypeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(sortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? ([\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[])\n\t\t\t: ([\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[]);\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tconst currentIndex = list.findIndex((item) => item === currentItem);\n\tconst nextIndex = (currentIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n"],"mappings":"oVAAA,WAAc,wBCgEZ,cAAAA,EAqBG,QAAAC,MArBH,oBApDF,IAAMC,EAAiB,CAAC,GAAGC,EAAuB,UAAU,EAqC5D,SAASC,EAA+B,CACvC,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,SAAUC,EACV,YAAAC,EACA,GAAGC,CACJ,EAA8C,CAC7C,IAAMC,EAAiBJ,EAAO,YAAY,EACpCK,EAAUL,EAAO,WAAW,EAE5BM,EACLD,GAAW,OAAOD,GAAmB,SAAWA,EAAiB,WAE5DG,EAAWN,IAAgBK,CAAa,GAC7Cb,EAACe,EAAA,CAAgB,KAAMN,EAAa,UAAWI,EAAe,EAG/D,OACCb,EAACgB,EAAA,CAAY,UAAWC,EAAG,OAAQX,CAAS,EAAI,GAAGI,EAClD,SAAAT,EAACiB,EAAA,CACA,UAAU,gDACV,KAAK,SACL,WAAW,QACX,SAAS,UACT,cAAc,MACd,sBAAqBL,EACrB,KAAMC,EACN,QAAS,IAAM,CACTF,GAGLO,EAA2BZ,EAAQE,CAAW,CAC/C,EAEC,UAAAI,IAAkB,YAClBZ,EAAC,QAAK,UAAU,UAAU,uBACdY,IAAkB,MAAQ,YAAc,aAAc,IAAI,SAEtE,EAEAR,GACF,EACD,CAEF,CAYA,SAASe,EAAgB,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAyB,CAC7E,OAAIF,IAAc,WACV,KAGDG,EAACC,EAAA,CAAK,KAAMH,EAAM,UAAWD,EAAY,GAAGE,EAAO,CAC3D,CAoBA,SAASG,EACRC,EACAC,EACC,CACD,GAAI,CAACD,EAAO,WAAW,EACtB,OAGD,IAAME,EAAiBF,EAAO,YAAY,EAM1C,OAF0BG,EAFzB,OAAOD,GAAmB,SAAWA,EAAiB,WAEOD,CAAW,EAE9C,CAC1B,IAAK,WACJD,EAAO,aAAa,EACpB,OACD,IAAK,MACJA,EAAO,cAAc,EAAK,EAC1B,OACD,IAAK,OACJA,EAAO,cAAc,EAAI,EACzB,OACD,QACC,MACF,CACD,CAEA,SAASG,EACRC,EACAH,EACC,CAMD,OAAOI,EAJNJ,IAAgB,eACZ,CAAC,WAAY,MAAO,MAAM,EAC1B,CAAC,WAAY,OAAQ,KAAK,EAESG,CAAoB,GAAK,UAClE,CAEA,SAASC,EACRC,EACAC,EACAC,EACC,CAED,IAAMC,GADeH,EAAK,UAAWI,GAASA,IAASH,CAAW,EAChC,GAAKD,EAAK,OAC5C,OAAOA,EAAK,GAAGG,CAAS,GAAKD,CAC9B","names":["jsx","jsxs","sortDirections","sortingDirections","DataTableHeader","children","className","column","propsSortIcon","sortingMode","props","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","TableHeader","cx","Button","toggleNextSortingDirection","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","_sortDirection","getNextSortDirection","currentSortDirection","getNextInCircularList","list","currentItem","fallback","nextIndex","item"]}
1
+ {"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx","../src/components/data-table/helpers.ts"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableBody,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n\tEmptyDataTableRow,\n} from \"./data-table.js\";\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Row,\n\ttype Table as TableInstance,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\t$timeSortingDirection,\n\ttype SortingMode,\n\tsortingDirections as baseSortingDirections,\n} from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Sort } from \"../icons/sort.js\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table> & {\n\ttable: TableInstance<TData>;\n};\n\nfunction DataTable<TData>({\n\tchildren,\n\ttable,\n\t...props\n}: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table {...props}>{children}</Table>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction DataTableHeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\"flex justify-start w-full h-full rounded-none\", className)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof TableHeader>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTableHeaderSortButton` component.\n */\nfunction DataTableHeader<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<TableHeader\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TableHeader>\n\t);\n}\n\nconst DataTableBody = TableBody;\nDataTableBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof TableHead>, \"children\">;\n\nfunction DataTableHead<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<TableHead {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\treturn header.isPlaceholder ? (\n\t\t\t\t\t\t\t<TableHeader key={header.id} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</TableRow>\n\t\t\t))}\n\t\t</TableHead>\n\t);\n}\n\nfunction DataTableRows<TData>() {\n\tconst { table } = useDataTableContext<TData>();\n\tconst rows = table.getRowModel().rows;\n\n\treturn (\n\t\t<>\n\t\t\t{rows.map((row) => (\n\t\t\t\t<DataTableRow key={row.id} row={row} />\n\t\t\t))}\n\t\t</>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<\n\tComponentProps<typeof TableRow>,\n\t\"chidlren\"\n> & {\n\trow: Row<TData>;\n};\n\nfunction DataTableRow<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t{row\n\t\t\t\t.getVisibleCells()\n\t\t\t\t.map((cell) =>\n\t\t\t\t\tflexRender(cell.column.columnDef.cell, cell.getContext()),\n\t\t\t\t)}\n\t\t</TableRow>\n\t);\n}\n\ntype EmptyDataTableRowProps = ComponentProps<typeof TableRow>;\n\nfunction EmptyDataTableRow<TData>({\n\tchildren,\n\t...props\n}: EmptyDataTableRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<TableRow {...props}>\n\t\t\t<TableCell colSpan={numberOfColumns}>{children}</TableCell>\n\t\t</TableRow>\n\t);\n}\n\nexport {\n\t//,\n\tDataTable,\n\tDataTableBody,\n\tDataTableHead,\n\tDataTableHeader,\n\tDataTableHeaderSortButton,\n\tDataTableRow,\n\tDataTableRows,\n\tEmptyDataTableRow,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <Sort mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n * unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n * unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n * this is equivalent to the inverse of alphanumeric sorting, or\n * unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n"],"mappings":"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","names":["flexRender","createContext","useContext","useMemo","invariant","alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","Fragment","jsx","jsxs","DataTableContext","createContext","useDataTableContext","context","useContext","invariant","DataTable","children","table","props","useMemo","Table","DataTableHeaderSortButton","className","column","disableSorting","iconPlacement","sortingMode","propSortIcon","onClick","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","Button","cx","event","toggleNextSortingDirection","$timeSortingDirection","DataTableHeader","TableHeader","DataTableBody","TableBody","DataTableHead","TableHead","headerGroup","TableRow","header","flexRender","DataTableRows","rows","row","DataTableRow","cell","EmptyDataTableRow","numberOfColumns","TableCell","DefaultSortIcon","direction","mode","props","jsx","Sort","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}
package/dist/dialog.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as P,b as v,c as u,d as m,e as p,f as d,g,h as D}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-ATNIDU3M.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{X as O}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var T=P,W=v,C=u,z=m,f=r(({className:o,...t},i)=>e(p,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...t}));f.displayName=p.displayName;var x=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...B},I)=>F(C,{children:[e(f,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(d,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","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",s,t),onInteractOutside:l=>{c(l),i?.(l)},onPointerDownOutside:l=>{c(l),n?.(l)},ref:I,...B,children:o})})]}));x.displayName=d.displayName;var N=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});N.displayName="DialogHeader";var k=({size:o="md",type:t="button",label:i="Close Dialog",appearance:n="ghost",...s})=>e(m,{asChild:!0,children:e(y,{appearance:n,icon:e(O,{}),label:i,size:o,type:t,...s})}),b=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});b.displayName="DialogBody";var h=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});h.displayName="DialogFooter";var R=r(({className:o,...t},i)=>e(g,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));R.displayName=g.displayName;var w=r(({className:o,...t},i)=>e(D,{ref:i,className:a("text-muted",o),...t}));w.displayName=D.displayName;export{T as Dialog,b as DialogBody,z as DialogClose,k as DialogCloseIconButton,x as DialogContent,w as DialogDescription,h as DialogFooter,N as DialogHeader,f as DialogOverlay,C as DialogPortal,R as DialogTitle,W as DialogTrigger};
1
+ import{a as P,b as v,c as u,d as m,e as p,f as d,g,h as D}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-DDMTW6XB.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a}from"./chunk-AZ56JGNY.js";import{X as O}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var T=P,W=v,C=u,z=m,f=r(({className:o,...t},i)=>e(p,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...t}));f.displayName=p.displayName;var x=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...B},I)=>F(C,{children:[e(f,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(d,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","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",s,t),onInteractOutside:l=>{c(l),i?.(l)},onPointerDownOutside:l=>{c(l),n?.(l)},ref:I,...B,children:o})})]}));x.displayName=d.displayName;var N=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});N.displayName="DialogHeader";var k=({size:o="md",type:t="button",label:i="Close Dialog",appearance:n="ghost",...s})=>e(m,{asChild:!0,children:e(y,{appearance:n,icon:e(O,{}),label:i,size:o,type:t,...s})}),b=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});b.displayName="DialogBody";var h=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});h.displayName="DialogFooter";var R=r(({className:o,...t},i)=>e(g,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));R.displayName=g.displayName;var w=r(({className:o,...t},i)=>e(D,{ref:i,className:a("text-muted",o),...t}));w.displayName=D.displayName;export{T as Dialog,b as DialogBody,z as DialogClose,k as DialogCloseIconButton,x as DialogContent,w as DialogDescription,h as DialogFooter,N as DialogHeader,f as DialogOverlay,C as DialogPortal,R as DialogTitle,W as DialogTrigger};
2
2
  //# sourceMappingURL=dialog.js.map
@@ -140,4 +140,4 @@ declare function $timeSortingDirection<T extends TimeSortingDirection | SortingD
140
140
  readonly desc: "newest-to-oldest";
141
141
  }[(T & "asc") | (T & "desc")] | (T & "newest-to-oldest") | (T & "oldest-to-newest");
142
142
 
143
- export { $alphanumericSortingDirection as $, type AlphanumericSortingDirection as A, type SortingMode as S, type TimeSortingDirection as T, $sortingDirection as a, $sortingMode as b, $timeSortingDirection as c, alphanumericSortingDirections as d, isSortingDirection as e, isSortingMode as f, isTimeSortingDirection as g, sortingModes as h, isAlphanumericSortingDirection as i, timeSortingDirections as j, type SortingDirection as k, sortingDirections as s, timeSortingByDirection as t };
143
+ export { $alphanumericSortingDirection as $, type AlphanumericSortingDirection as A, type SortingDirection as S, type TimeSortingDirection as T, $sortingDirection as a, $sortingMode as b, $timeSortingDirection as c, alphanumericSortingDirections as d, isSortingDirection as e, isSortingMode as f, isTimeSortingDirection as g, sortingModes as h, isAlphanumericSortingDirection as i, timeSortingDirections as j, type SortingMode as k, sortingDirections as s, timeSortingByDirection as t };
package/dist/icons.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { S as SortingMode, A as AlphanumericSortingDirection, T as TimeSortingDirection, k as SortingDirection } from './direction-A0wepfUT.js';
2
+ import { k as SortingMode, A as AlphanumericSortingDirection, T as TimeSortingDirection, S as SortingDirection } from './direction-veAOo2is.js';
3
3
  import { S as SvgAttributes } from './types-BuKAGhC-.js';
4
4
  import 'react';
5
5
 
@@ -1,2 +1,2 @@
1
- import{a as b,c as v,d as x,e as y,g as h}from"./chunk-WGF5NYWL.js";import"./chunk-MF2QITTY.js";import{b as z}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-7XIZZ4HQ.js";import{a as l}from"./chunk-XBVAQ3DV.js";import"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CaretLeft as k}from"@phosphor-icons/react/CaretLeft";import{CaretRight as A}from"@phosphor-icons/react/CaretRight";import{Slot as E}from"@radix-ui/react-slot";import{createContext as F,forwardRef as m,useContext as N,useState as W}from"react";import P from"tiny-invariant";import{jsx as s,jsxs as f}from"react/jsx-runtime";var c=F(void 0),O=m(({className:n,children:e,defaultPageSize:a,...t},i)=>{let[o,r]=W(a);return s(c.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:r},children:s("div",{className:p("inline-flex items-center justify-between gap-2",n),ref:i,...t,children:e})})});O.displayName="CursorPagination";var T=m(({hasNextPage:n,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>f(d,{appearance:"panel",ref:o,...i,children:[s(l,{appearance:"ghost",disabled:!e,icon:s(k,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(z,{orientation:"vertical",className:"min-h-5"}),s(l,{appearance:"ghost",disabled:!n,icon:s(A,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));T.displayName="CursorButtons";var $=[5,10,20,50,100],B=m(({className:n,pageSizes:e=$,onChangePageSize:a,...t},i)=>{let o=N(c);return P(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),P(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),P(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),f(b,{defaultValue:`${o.pageSize}`,onChange:r=>{let g=Number.parseInt(r,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(x,{ref:i,className:p("w-auto min-w-36",n),value:o.pageSize,...t,children:s(v,{})}),s(y,{width:"trigger",children:e.map(r=>f(h,{value:`${r}`,children:[r," per page"]},r))})]})});B.displayName="CursorPageSizeSelect";function D({asChild:n=!1,className:e,...a}){let t=N(c);return P(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),f(n?E:"span",{className:p("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}import{useEffect as V,useState as w}from"react";function H({listSize:n,pageSize:e}){let[a,t]=w(1),[i,o]=w(e);V(()=>{o(e),t(1)},[e]),V(()=>{t(1)},[n]);let r=Math.ceil(n/i),g=(a-1)*i,S=a>1,C=a<r;function M(u){let j=Math.max(1,Math.min(u,r));t(j)}function R(){C&&t(u=>Math.min(u+1,r))}function G(){S&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function L(){t(r)}function U(){t(1)}return{currentPage:a,goToFirstPage:U,goToLastPage:L,goToPage:M,hasNextPage:C,hasPreviousPage:S,nextPage:R,offset:g,pageSize:i,previousPage:G,setPageSize:I,totalPages:r}}function q(n,e){return n.slice(e.offset,e.offset+e.pageSize)}export{T as CursorButtons,B as CursorPageSizeSelect,D as CursorPageSizeValue,O as CursorPagination,q as getOffsetPaginatedSlice,H as useOffsetPagination};
1
+ import{a as b,c as v,d as x,e as y,g as h}from"./chunk-WGF5NYWL.js";import"./chunk-MF2QITTY.js";import{b as z}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-7XIZZ4HQ.js";import{a as l}from"./chunk-XBVAQ3DV.js";import"./chunk-J3NVDJIE.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CaretLeft as k}from"@phosphor-icons/react/CaretLeft";import{CaretRight as A}from"@phosphor-icons/react/CaretRight";import{Slot as E}from"@radix-ui/react-slot";import{createContext as F,forwardRef as m,useContext as N,useState as W}from"react";import P from"tiny-invariant";import{jsx as s,jsxs as f}from"react/jsx-runtime";var c=F(void 0),O=m(({className:n,children:e,defaultPageSize:a,...t},i)=>{let[o,r]=W(a);return s(c.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:r},children:s("div",{className:p("inline-flex items-center justify-between gap-2",n),ref:i,...t,children:e})})});O.displayName="CursorPagination";var T=m(({hasNextPage:n,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>f(d,{appearance:"panel",ref:o,...i,children:[s(l,{appearance:"ghost",disabled:!e,icon:s(k,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(z,{orientation:"vertical",className:"min-h-5"}),s(l,{appearance:"ghost",disabled:!n,icon:s(A,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));T.displayName="CursorButtons";var $=[5,10,20,50,100],B=m(({className:n,pageSizes:e=$,onChangePageSize:a,...t},i)=>{let o=N(c);return P(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),P(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),P(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),f(b,{defaultValue:`${o.pageSize}`,onValueChange:r=>{let g=Number.parseInt(r,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(x,{ref:i,className:p("w-auto min-w-36",n),value:o.pageSize,...t,children:s(v,{})}),s(y,{width:"trigger",children:e.map(r=>f(h,{value:`${r}`,children:[r," per page"]},r))})]})});B.displayName="CursorPageSizeSelect";function D({asChild:n=!1,className:e,...a}){let t=N(c);return P(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),f(n?E:"span",{className:p("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}import{useEffect as V,useState as w}from"react";function H({listSize:n,pageSize:e}){let[a,t]=w(1),[i,o]=w(e);V(()=>{o(e),t(1)},[e]),V(()=>{t(1)},[n]);let r=Math.ceil(n/i),g=(a-1)*i,S=a>1,C=a<r;function M(u){let j=Math.max(1,Math.min(u,r));t(j)}function R(){C&&t(u=>Math.min(u+1,r))}function G(){S&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function L(){t(r)}function U(){t(1)}return{currentPage:a,goToFirstPage:U,goToLastPage:L,goToPage:M,hasNextPage:C,hasPreviousPage:S,nextPage:R,offset:g,pageSize:i,previousPage:G,setPageSize:I,totalPages:r}}function q(n,e){return n.slice(e.offset,e.offset+e.pageSize)}export{T as CursorButtons,B as CursorPageSizeSelect,D as CursorPageSizeValue,O as CursorPagination,q as getOffsetPaginatedSlice,H as useOffsetPagination};
2
2
  //# sourceMappingURL=pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\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);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof SelectTrigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<\n\tComponentRef<typeof SelectTrigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonChange={(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<SelectTrigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n */\nfunction CursorPageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\n\nexport {\n\t//,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n\tCursorPageSizeValue,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","import { 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 */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","Slot","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","CursorPageSizeValue","asChild","Slot","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}
1
+ {"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/CaretRight\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\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);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof SelectTrigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<\n\tComponentRef<typeof SelectTrigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select\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<SelectTrigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n */\nfunction CursorPageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\n\nexport {\n\t//,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n\tCursorPageSizeValue,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","import { 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 */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","Slot","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","CursorPageSizeValue","asChild","Slot","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}
package/dist/sheet.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as S,b as u,c as v,d as m,e as p,f as d,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-ATNIDU3M.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as P}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{X as D}from"@phosphor-icons/react/X";import{cva as L}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as i,jsxs as k}from"react/jsx-runtime";var M=S,w=u,A=m,B=v,y=n(({className:e,...t},o)=>i(p,{className:r("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm",e),...t,ref:o}));y.displayName=p.displayName;var I=L("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),C=n(({children:e,className:t,onInteractOutside:o,onPointerDownOutside:a,preferredWidth:l="sm:max-w-[30rem]",side:N="right",...R},H)=>k(B,{children:[i(y,{}),i(d,{className:r(I({side:N}),l,t),onInteractOutside:s=>{c(s),o?.(s)},onPointerDownOutside:s=>{c(s),a?.(s)},ref:H,...R,children:e})]}));C.displayName=d.displayName;var O=({size:e="md",type:t="button",label:o="Close Sheet",appearance:a="ghost",...l})=>i(m,{asChild:!0,children:i(P,{appearance:a,icon:i(D,{}),label:o,size:e,type:t,...l})}),W=({className:e,...t})=>i("div",{className:r("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t}),E=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t}),V=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t}),g=n(({className:e,...t},o)=>i(h,{ref:o,className:r("text-strong flex-1 truncate text-lg font-medium",e),...t}));g.displayName=h.displayName;var b=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex items-center justify-between gap-2",t),...o,ref:a,children:e}));b.displayName="SheetTitleGroup";var T=n(({className:e,...t},o)=>i(f,{ref:o,className:r("text-body text-sm",e),...t}));T.displayName=f.displayName;var x=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex h-full items-center gap-2",t),...o,ref:a,children:e}));x.displayName="SheetActions";export{M as Sheet,x as SheetActions,W as SheetBody,A as SheetClose,O as SheetCloseIconButton,C as SheetContent,T as SheetDescription,V as SheetFooter,E as SheetHeader,g as SheetTitle,b as SheetTitleGroup,w as SheetTrigger};
1
+ import{a as S,b as u,c as v,d as m,e as p,f as d,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-DDMTW6XB.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as P}from"./chunk-XBVAQ3DV.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-7O36LG52.js";import"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{X as D}from"@phosphor-icons/react/X";import{cva as L}from"class-variance-authority";import{forwardRef as n}from"react";import{jsx as i,jsxs as k}from"react/jsx-runtime";var M=S,w=u,A=m,B=v,y=n(({className:e,...t},o)=>i(p,{className:r("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm",e),...t,ref:o}));y.displayName=p.displayName;var I=L("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),C=n(({children:e,className:t,onInteractOutside:o,onPointerDownOutside:a,preferredWidth:l="sm:max-w-[30rem]",side:N="right",...R},H)=>k(B,{children:[i(y,{}),i(d,{className:r(I({side:N}),l,t),onInteractOutside:s=>{c(s),o?.(s)},onPointerDownOutside:s=>{c(s),a?.(s)},ref:H,...R,children:e})]}));C.displayName=d.displayName;var O=({size:e="md",type:t="button",label:o="Close Sheet",appearance:a="ghost",...l})=>i(m,{asChild:!0,children:i(P,{appearance:a,icon:i(D,{}),label:o,size:e,type:t,...l})}),W=({className:e,...t})=>i("div",{className:r("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t}),E=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t}),V=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t}),g=n(({className:e,...t},o)=>i(h,{ref:o,className:r("text-strong flex-1 truncate text-lg font-medium",e),...t}));g.displayName=h.displayName;var b=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex items-center justify-between gap-2",t),...o,ref:a,children:e}));b.displayName="SheetTitleGroup";var T=n(({className:e,...t},o)=>i(f,{ref:o,className:r("text-body text-sm",e),...t}));T.displayName=f.displayName;var x=n(({children:e,className:t,...o},a)=>i("div",{className:r("flex h-full items-center gap-2",t),...o,ref:a,children:e}));x.displayName="SheetActions";export{M as Sheet,x as SheetActions,W as SheetBody,A as SheetClose,O as SheetCloseIconButton,C as SheetContent,T as SheetDescription,V as SheetFooter,E as SheetHeader,g as SheetTitle,b as SheetTitleGroup,w as SheetTrigger};
2
2
  //# sourceMappingURL=sheet.js.map
package/dist/sorting.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { $ as $alphanumericSortingDirection, a as $sortingDirection, b as $sortingMode, c as $timeSortingDirection, A as AlphanumericSortingDirection, k as SortingDirection, S as SortingMode, T as TimeSortingDirection, d as alphanumericSortingDirections, i as isAlphanumericSortingDirection, e as isSortingDirection, f as isSortingMode, g as isTimeSortingDirection, s as sortingDirections, h as sortingModes, t as timeSortingByDirection, j as timeSortingDirections } from './direction-A0wepfUT.js';
1
+ export { $ as $alphanumericSortingDirection, a as $sortingDirection, b as $sortingMode, c as $timeSortingDirection, A as AlphanumericSortingDirection, S as SortingDirection, k as SortingMode, T as TimeSortingDirection, d as alphanumericSortingDirections, i as isAlphanumericSortingDirection, e as isSortingDirection, f as isSortingMode, g as isTimeSortingDirection, s as sortingDirections, h as sortingModes, t as timeSortingByDirection, j as timeSortingDirections } from './direction-veAOo2is.js';
2
2
 
3
3
  /**
4
4
  * Compare dates in newest-to-oldest (descending) order.
package/dist/table.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as e,b as a,c as l,d as b,e as T,f as o,g as d,h as r}from"./chunk-QMAGKYIX.js";import"./chunk-AZ56JGNY.js";export{e as Table,l as TableBody,r as TableCaption,d as TableCell,b as TableFoot,a as TableHead,o as TableHeader,T as TableRow};
1
+ import{a as e,b as a,c as l,d as b,e as T,f as o,g as d,h as r}from"./chunk-YAT4IMMN.js";import"./chunk-AZ56JGNY.js";export{e as Table,l as TableBody,r as TableCaption,d as TableCell,b as TableFoot,a as TableHead,o as TableHeader,T as TableRow};
2
2
  //# sourceMappingURL=table.js.map