@sakura-ui/sakura-ui 0.2.0 → 0.4.1

package/packages/markdown/dist/types/components/Markdown.d.ts

@@ -0,0 +1,15 @@
+import * as production from 'react/jsx-runtime';
+import { type HeadingItem } from '../plugins';
+interface TocProps {
+    items: HeadingItem[];
+}
+export declare const TableOfContents: ({ items }: TocProps) => production.JSX.Element;
+type Props = {
+    tocTitle?: string;
+    showToc?: boolean;
+    shiftHeding?: number;
+    children: string;
+};
+export declare const Markdown: ({ children, showToc, tocTitle, shiftHeding }: Props) => production.JSX.Element;
+export {};
+//# sourceMappingURL=Markdown.d.ts.map

package/packages/markdown/dist/types/components/Markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,UAAU,MAAM,mBAAmB,CAAA;AA6C/C,OAAO,EASL,KAAK,WAAW,EACjB,MAAM,YAAY,CAAA;AAEnB,UAAU,QAAQ;IAChB,KAAK,EAAE,WAAW,EAAE,CAAA;CACrB;AAED,eAAO,MAAM,eAAe,GAAI,WAAW,QAAQ,2BAelD,CAAA;AAgKD,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,8CAKtB,KAAK,2BAmHP,CAAA"}

package/packages/markdown/dist/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Markdown } from './Markdown';
+//# sourceMappingURL=index.d.ts.map

package/packages/markdown/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/packages/markdown/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Markdown } from './components';
+//# sourceMappingURL=index.d.ts.map

package/packages/markdown/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA"}

package/packages/markdown/dist/types/plugins/attr.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const attrPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=attr.d.ts.map

package/packages/markdown/dist/types/plugins/attr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attr.d.ts","sourceRoot":"","sources":["../../../src/plugins/attr.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,UAAU,SACb,MAAM,IAAI,SASnB,CAAA"}

package/packages/markdown/dist/types/plugins/card.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const cardPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=card.d.ts.map

package/packages/markdown/dist/types/plugins/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/plugins/card.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,UAAU,SACb,MAAM,IAAI,SA+CnB,CAAA"}

package/packages/markdown/dist/types/plugins/cell.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const cellPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=cell.d.ts.map

package/packages/markdown/dist/types/plugins/cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../src/plugins/cell.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,UAAU,SACb,MAAM,IAAI,SAqCnB,CAAA"}

package/packages/markdown/dist/types/plugins/faq.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const faqPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=faq.d.ts.map

package/packages/markdown/dist/types/plugins/faq.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../../../src/plugins/faq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,SAAS,SACZ,MAAM,IAAI,SA8BnB,CAAA"}

package/packages/markdown/dist/types/plugins/grid.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const gridPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=grid.d.ts.map

package/packages/markdown/dist/types/plugins/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/plugins/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,UAAU,SACb,MAAM,IAAI,SA4CnB,CAAA"}

package/packages/markdown/dist/types/plugins/headings.d.ts

@@ -0,0 +1,11 @@
+import type { Root } from 'mdast';
+export type HeadingItem = {
+    id?: string;
+    depth: number;
+    value?: string;
+    children?: Array<HeadingItem>;
+};
+export declare const headingsPlugin: () => (tree: Root, vFile: {
+    data: Record<string, unknown>;
+}) => void;
+//# sourceMappingURL=headings.d.ts.map

package/packages/markdown/dist/types/plugins/headings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headings.d.ts","sourceRoot":"","sources":["../../../src/plugins/headings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,OAAO,CAAA;AAO1C,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,cAAc,SACjB,MAAM,IAAI,EAAE,OAAO;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,SAsB7D,CAAA"}

package/packages/markdown/dist/types/plugins/helper.d.ts

@@ -0,0 +1,9 @@
+import type { Directives } from 'mdast-util-directive';
+import type { Node } from 'unist';
+import type { Heading } from 'mdast';
+export declare const isDirective: (node: Node) => node is Directives;
+export declare const isContainerDirective: (node: Node) => node is Directives;
+export declare const isLeafDirective: (node: Node) => node is Directives;
+export declare const isTextDirective: (node: Node) => node is Directives;
+export declare const isHeading: (node: Node) => node is Heading;
+//# sourceMappingURL=helper.d.ts.map

package/packages/markdown/dist/types/plugins/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/plugins/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEpC,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,UAMhD,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,UAEzD,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,UAEpD,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,UAEpD,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,KAAG,IAAI,IAAI,OAE9C,CAAA"}

package/packages/markdown/dist/types/plugins/index.d.ts

@@ -0,0 +1,9 @@
+export { youtubePlugin } from './youtube';
+export { attrPlugin } from './attr';
+export { linkButtonPlugin } from './linkButton';
+export { gridPlugin } from './grid';
+export { cellPlugin } from './cell';
+export { cardPlugin } from './card';
+export { faqPlugin } from './faq';
+export { headingsPlugin, type HeadingItem } from './headings';
+//# sourceMappingURL=index.d.ts.map

package/packages/markdown/dist/types/plugins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA"}

package/packages/markdown/dist/types/plugins/linkButton.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const linkButtonPlugin: () => (tree: Root) => void;
+//# sourceMappingURL=linkButton.d.ts.map

package/packages/markdown/dist/types/plugins/linkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkButton.d.ts","sourceRoot":"","sources":["../../../src/plugins/linkButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQjC,eAAO,MAAM,gBAAgB,SACnB,MAAM,IAAI,SAgBnB,CAAA"}

package/packages/markdown/dist/types/plugins/youtube.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+export declare const youtubePlugin: () => (tree: Root) => void;
+//# sourceMappingURL=youtube.d.ts.map

package/packages/markdown/dist/types/plugins/youtube.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube.d.ts","sourceRoot":"","sources":["../../../src/plugins/youtube.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAOjC,eAAO,MAAM,aAAa,SAChB,MAAM,IAAI,SAwCnB,CAAA"}

package/packages/markdown/node_modules/.bin/autoprefixer

@@ -0,0 +1,55 @@
+#!/bin/sh
+# Resolve $0 through symlinks so basedir is the shim's real directory.
+# Cap hops at the kernel's ELOOP limit so a cycle cannot hang the shim.
+link="$0"
+hops=0
+while [ -L "$link" ] && [ "$hops" -lt 40 ]; do
+  hops=$((hops+1))
+  target=$(readlink "$link")
+  case "$target" in
+    /*) link="$target" ;;
+    *)  link="$(dirname "$link")/$target" ;;
+  esac
+done
+basedir=$(dirname "$(echo "$link" | sed -e 's,\\,/,g')")
+basedir_win="$basedir"
+exe=""
+msys=""
+
+case `uname -a` in
+  *CYGWIN*|*MINGW*|*MSYS*)
+    if command -v cygpath > /dev/null 2>&1; then
+      basedir_win=`cygpath -w "$basedir"`
+    fi
+    exe=".exe"
+    msys="true"
+  ;;
+  *WSL2*)
+    if command -v wslpath > /dev/null 2>&1; then
+      basedir_win="$(wslpath -w "$basedir" 2> /dev/null)"
+      if [ $? -ne 0 ] || [ -z "$basedir_win" ]; then
+        basedir_win="$basedir"
+      else
+        exe=".exe"
+      fi
+    fi
+  ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/autoprefixer@10.5.4_postcss@8.5.26/node_modules/autoprefixer/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/autoprefixer@10.5.4_postcss@8.5.26/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/autoprefixer@10.5.4_postcss@8.5.26/node_modules/autoprefixer/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/autoprefixer@10.5.4_postcss@8.5.26/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -n "$exe" ] && [ -x "$basedir/node.exe" ]; then
+  exec "$basedir/node.exe"  "$basedir_win/../autoprefixer/bin/autoprefixer" "$@"
+elif [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../autoprefixer/bin/autoprefixer" "$@"
+elif command -v node >/dev/null 2>&1; then
+  exec node  "$basedir/../autoprefixer/bin/autoprefixer" "$@"
+elif [ -n "$exe" ] && command -v node.exe >/dev/null 2>&1; then
+  exec node.exe  "$basedir_win/../autoprefixer/bin/autoprefixer" "$@"
+else
+  exec node  "$basedir/../autoprefixer/bin/autoprefixer" "$@"
+fi
+# cmd-shim-target=/home/runner/work/sakura-ui/sakura-ui/packages/markdown/node_modules/autoprefixer/bin/autoprefixer

package/packages/markdown/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@sakura-ui/markdown",
+  "version": "0.2.2",
+  "description": "",
+  "keywords": [
+    "markdown"
+  ],
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/glassonion1/sakura-ui.git",
+    "directory": "packages/markdown"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "run-s lint:*",
+    "lint:lint": "biome lint ./",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
+    "build": "run-p build:*",
+    "build:scripts": "vite build",
+    "build:types": "tsc && tsc-alias",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@sakura-ui/core": "^0.4.0-beta.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tailwindcss": "^4.1.17"
+  },
+  "dependencies": {
+    "@sakura-ui/helper": "workspace:*",
+    "github-slugger": "^2.0.0",
+    "hastscript": "^9.0.1",
+    "mdast-util-directive": "^3.1.0",
+    "mdast-util-to-string": "^4.0.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-shift-heading": "^2.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark": "^15.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-directive": "^3.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/mdast": "^4.0.4",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/unist": "^3.0.3",
+    "autoprefixer": "catalog:",
+    "happy-dom": "catalog:",
+    "postcss": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:"
+  }
+}

package/packages/markdown/src/components/Markdown.tsx

@@ -0,0 +1,365 @@
+import React, { Children } from 'react'
+import * as production from 'react/jsx-runtime'
+import { remark } from 'remark'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import remarkDirective from 'remark-directive'
+import remarkRehype from 'remark-rehype'
+import remarkBreaks from 'remark-breaks'
+import rehypeRaw from 'rehype-raw'
+import rehypeExternalLinks from 'rehype-external-links'
+import rebypeShiftHeding from 'rehype-shift-heading'
+import rehypeReact from 'rehype-react'
+import rehypeSlug from 'rehype-slug'
+import { cx } from '@sakura-ui/helper'
+import {
+  Link,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Table,
+  Caption,
+  Thead,
+  Tbody,
+  Th,
+  Tr,
+  Td,
+  Ul,
+  Ol,
+  Pre,
+  Code,
+  Faq,
+  Question,
+  Answer,
+  Button,
+  Card,
+  CardImg,
+  CardBody,
+  CardFooter,
+  LinkCard,
+  LinkCardHeader,
+  OverflowContainer
+} from '@sakura-ui/core'
+import {
+  attrPlugin,
+  youtubePlugin,
+  linkButtonPlugin,
+  gridPlugin,
+  cellPlugin,
+  cardPlugin,
+  faqPlugin,
+  headingsPlugin,
+  type HeadingItem
+} from '../plugins'
+
+interface TocProps {
+  items: HeadingItem[]
+}
+
+export const TableOfContents = ({ items }: TocProps) => {
+  return (
+    <>
+      {items.map((item) => {
+        return (
+          <li key={item.id}>
+            <Link href={`#${item.id}`}>{item.value}</Link>
+            {item.children ? (
+              <Ul>{<TableOfContents items={item.children} />}</Ul>
+            ) : null}
+          </li>
+        )
+      })}
+    </>
+  )
+}
+
+interface TableContainerProps extends React.ComponentPropsWithoutRef<'table'> {}
+
+const TableContainer = (props: TableContainerProps) => {
+  const { className, children, ...restProps } = props
+
+  return (
+    <OverflowContainer>
+      <Table className={cx(className)} {...restProps}>
+        {children}
+      </Table>
+    </OverflowContainer>
+  )
+}
+
+interface DataProps {
+  [key: `data-${string}`]: unknown
+}
+
+interface AnchorProps extends React.ComponentPropsWithoutRef<'a'>, DataProps {}
+
+const Anchor = (props: AnchorProps) => {
+  const { children, href, ...restProps } = props
+
+  if (restProps['data-node'] === 'link-button') {
+    return (
+      <Button as="a" variant="secondary" href={href}>
+        {children}
+      </Button>
+    )
+  }
+
+  return (
+    <Link href={href} {...restProps}>
+      {children}
+    </Link>
+  )
+}
+
+interface ArticleProps
+  extends React.ComponentPropsWithoutRef<'article'>,
+    DataProps {}
+
+const Article = (props: ArticleProps) => {
+  const { children, className, ...restProps } = props
+
+  const node = restProps['data-node']
+
+  if (node === 'card') {
+    if (restProps['data-behavior'] === 'link') {
+      const href = restProps['data-href'] as string
+
+      return (
+        <LinkCard href={href} className={cx(className)}>
+          {children}
+        </LinkCard>
+      )
+    }
+    return <Card className={cx(className)}>{children}</Card>
+  }
+
+  return (
+    <article className={className} {...restProps}>
+      {children}
+    </article>
+  )
+}
+
+interface DivProps extends React.ComponentPropsWithoutRef<'div'>, DataProps {}
+
+const Div = (props: DivProps) => {
+  const { children, ...restProps } = props
+
+  const node = restProps['data-node']
+
+  if (node === 'card-title') {
+    return <LinkCardHeader>{children}</LinkCardHeader>
+  }
+  if (node === 'card-description') {
+    return <CardBody>{children}</CardBody>
+  }
+  if (node === 'card-footer') {
+    return <CardFooter>{children}</CardFooter>
+  }
+
+  if (restProps['data-behavior'] === 'list') {
+    // Set the css class configured for cells to the ul tag
+    return (
+      <ul className={restProps.className}>
+        {Children.map(children, (child) => (
+          <li className="sm:grid" key={Math.random()}>
+            {child}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  return <div {...restProps}>{children}</div>
+}
+
+interface ImgProps extends React.ComponentPropsWithoutRef<'img'>, DataProps {}
+
+const Img = (props: ImgProps) => {
+  const { children, className, ...restProps } = props
+
+  if (restProps['data-node'] === 'card-img') {
+    return (
+      <CardImg
+        className={cx('w-full aspect-[352/226]', className)}
+        {...restProps}
+      />
+    )
+  }
+
+  if (restProps['data-node'] === 'cell-img') {
+    // biome-ignore lint/a11y/useAltText: alt is carried by restProps from the markdown image syntax
+    return <img className={cx('mb-4', className)} {...restProps} />
+  }
+
+  // biome-ignore lint/a11y/useAltText: alt is carried by restProps from the markdown image syntax
+  return <img className={className} {...restProps} />
+}
+
+interface IframeProps extends React.ComponentPropsWithoutRef<'iframe'> {}
+
+const Iframe = (props: IframeProps) => {
+  const { className, children, ...restProps } = props
+
+  const styleMargin = `
+    my-8
+  `
+
+  let style = `
+    aspect-video
+    w-full
+    max-w-[470px]
+  `
+
+  if (props.width || props.height) {
+    style = `
+      aspect-video
+      w-full
+      lg:aspect-auto
+      lg:w-[${props.width}px]
+      lg:h-[${props.height}px]
+    `
+  }
+
+  return (
+    <iframe className={cx(styleMargin, style, className)} {...restProps}>
+      {children}
+    </iframe>
+  )
+}
+
+const sleep = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time))
+
+type Props = {
+  tocTitle?: string
+  showToc?: boolean
+  shiftHeding?: number
+  children: string
+}
+
+export const Markdown = ({
+  children,
+  showToc,
+  tocTitle = '目次',
+  shiftHeding = 0
+}: Props) => {
+  const [toc, setToc] = React.useState<HeadingItem[]>([])
+  const [element, setElement] = React.useState(<React.Fragment />)
+
+  const markdown2Headings = React.useCallback((md: string) => {
+    // biome-ignore lint/suspicious/noExplicitAny: remark does not type the data that plugins attach to the VFile
+    const result: any = remark().use(headingsPlugin).processSync(md)
+
+    const headings: HeadingItem[] = result.data.fm.headings.filter(
+      (obj: HeadingItem) => obj.depth < 3
+    )
+
+    return headings
+  }, [])
+
+  const markdown2ReactElements = React.useCallback(
+    (md: string) => {
+      const rhypeReactOptions = {
+        ...production,
+        components: {
+          a: Anchor,
+          article: Article,
+          button: Button,
+          code: Code,
+          dl: Faq,
+          dt: Question,
+          dd: Answer,
+          h1: H1,
+          h2: H2,
+          h3: H3,
+          h4: H4,
+          h5: H5,
+          h6: H6,
+          iframe: Iframe,
+          img: Img,
+          ul: Ul,
+          ol: Ol,
+          pre: Pre,
+          table: TableContainer,
+          caption: Caption,
+          thead: Thead,
+          tbody: Tbody,
+          th: Th,
+          tr: Tr,
+          td: Td,
+          div: Div
+        }
+      }
+
+      const elem = unified()
+        .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
+        .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
+        .use(remarkDirective) // support for directive syntax
+        .use(remarkBreaks)
+        .use(attrPlugin)
+        .use(youtubePlugin)
+        .use(linkButtonPlugin)
+        .use(cellPlugin)
+        .use(cardPlugin)
+        .use(faqPlugin)
+        .use(gridPlugin)
+        .use(remarkRehype, {
+          allowDangerousHtml: true
+        }) // mdast -> hast      (HTML Abstract Syntax Tree)
+        .use(rehypeRaw) // hast  -> hast
+        .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
+        .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
+        .use(rehypeSlug)
+        // biome-ignore lint/suspicious/noExplicitAny: rehype-react's declared option type rejects the component map it accepts at runtime
+        .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
+        .processSync(md).result
+      return elem
+    },
+    [shiftHeding]
+  )
+
+  React.useEffect(() => {
+    setToc(markdown2Headings(children))
+    setElement(markdown2ReactElements(children))
+  }, [children, markdown2Headings, markdown2ReactElements])
+
+  React.useEffect(() => {
+    // Necessary to make in-page links work.
+    const scrollToHash = async () => {
+      await sleep(500)
+      if (location.hash) {
+        document
+          .getElementById(decodeURI(location.hash.substring(1)))
+          ?.scrollIntoView()
+      }
+    }
+    scrollToHash()
+  }, [])
+
+  const style = `
+    rounded-3xl
+    p-10
+    bg-yellow-50
+  `
+
+  return (
+    <div className="py-8 flex flex-col gap-8">
+      {showToc && (
+        <nav className={style}>
+          <h2 className="mb-4 font-bold text-h-xs-m sm:text-h-xs">
+            {tocTitle}
+          </h2>
+          <Ul>
+            <TableOfContents items={toc} />
+          </Ul>
+        </nav>
+      )}
+      {element}
+    </div>
+  )
+}

package/packages/markdown/src/components/index.ts

@@ -0,0 +1 @@
+export { Markdown } from './Markdown'

package/packages/markdown/src/global.d.ts

@@ -0,0 +1,9 @@
+import type { JSX as Jsx } from 'react/jsx-runtime'
+
+declare global {
+  namespace JSX {
+    type ElementClass = Jsx.ElementClass
+    type Element = Jsx.Element
+    type IntrinsicElements = Jsx.IntrinsicElements
+  }
+}

package/packages/markdown/src/index.ts

@@ -0,0 +1 @@
+export { Markdown } from './components'